JQUERY使用 $.POST提交JSON数据

jquery中$.ajax（）⽅法使⽤详解1.url说明：发送请求的地址（默认为当前页⾯），要求是String类型的参数，⽐如是.net下，"~wexin(控制器)/getweinxinmenu(动作)"，2.type说明：请求⽅法(post或者get)，默认是get，要求是String类型的参数。

其他的htpp请求如（put、delete）等也⽀持，但是要浏览器⽀持3.timeout说明：设置请求超时时间（毫秒），要求是number类型的参数。

此设置将覆盖$.ajaxSetup()⽅法的全局设置。

4.async说明：默认值为true，所有请求是异步，要求是Bool类型的参数，如果需要发送同步请求，将此项设置为false。

注意：同步时浏览器会被锁住。

5.cache说明：默认为true(当datatype为script时，默认为false)从浏览器缓存中加载请求信息，要求是Bool类型的参数。

6.data说明：发送到服务器的数据，要求是Object或string类型的参数。

如果已经不是字符串，将⾃动转换为字符串格式。

get请求中将附加在url 后。

防⽌这种⾃动转换，可以查看 processData选项。

对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。

如果是数组，JQuery将⾃动为不同值对应同⼀个名称。

例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:说明：预期服务器返回的数据类型，要求为String类型的参数。

如果不指定，JQuery将⾃动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。

jq解析json的高级用法jq是一个轻量级的命令行工具，用于解析和操作JSON数据。

它提供了丰富的功能和高级用法，可以帮助用户更精确地提取和处理JSON数据。

本文将介绍jq解析JSON的高级用法，包括过滤、映射和条件操作等。

第一步：基本用法回顾在开始讨论jq的高级用法之前，我们先回顾一下jq的基本用法。

jq能够将JSON数据转换为人类可读的格式，并且能够输出特定的字段或组合字段的值。

以下是一些常用的命令：1. `.`这个点操作符表示当前对象。

例如：bashecho '{"name": "Alice", "age": 30}' jq '.name'# 输出："Alice"2. .点操作符还可以与其他命令连用，以获取嵌套字段的值。

例如：bashecho '{"user": {"name": "Alice", "age": 30}}' jq ''# 输出："Alice"3. `[]`这个方括号操作符可以用来遍历数组，并逐个输出数组中的元素。

例如：bashecho '[1, 2, 3, 4, 5]' jq '.[]'# 输出：# 1# 2# 3# 4# 5以上是jq的基本用法，用于提取和处理JSON数据中的字段。

接下来，我们将学习一些更高级的用法。

第二步：高级过滤器jq支持一些高级过滤器，用于在JSON数据中进行更复杂的查询和操作。

下面是几个常见的高级过滤器：1. `select()``select()`函数用于根据指定的条件过滤JSON对象。

例如：bashecho '[{"name": "Alice", "age": 30}, {"name": "Bob", "age": 25}]' jq 'select(.age > 28)'# 输出：# {"name": "Alice", "age": 30}2. `map()``map()`函数用于对数组中的每个元素应用指定的操作，并返回一个新的数组。

JQuery提交表单Form.js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用。

1、JQuery框架下载/2、Form插件下载/jquery/form/#download3、Form插件的简单入门第二步：jquery.js和form.js文件的包含表单插件API提供了几个方法，让你轻松管理表单数据和进行表单提交。

ajaxForm增加所有需要的事件监听器，为AJAX提交表单做好准备。

ajaxForm不能提交表单。

在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。

ajaxForm接受0个或1个参数。

这个单个的参数既可以是一个回调函数，也可以是一个Options对象。

可链接（Chainable）：可以。

实例：$('#myFormId').ajaxForm();ajaxSubmit马上由AJAX来提交表单。

大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。

ajaxSubmit接受0个或1个参数。

这个单个的参数既可以是一个回调函数，也可以是一个Options对象。

可链接（Chainable）：可以。

实例：// 绑定表单提交事件处理器$('#myFormId').submit(function() {// 提交表单$(this).ajaxSubmit();// 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回falsereturn false;});formSerialize将表单串行化（或序列化）成一个查询字符串。

这个方法将返回以下格式的字符串：name1=value1&name2=value2。

可链接（Chainable）：不能，这个方法返回一个字符串。

实例：var queryString = $('#myFormId').formSerialize();// 现在可以使用$.get、$.post、$.ajax等来提交数据$.post('myscript.php', queryString);fieldSerialize将表单的字段元素串行化（或序列化）成一个查询字符串。

详解http之post详解http之post ⾸先，我们先看看jquery中的post⽅法的使⽤：$.ajax({url:'api/bbg/goods/get_goods_list_wechat',data:{'data': JSON.stringify({"offset": 0,"pageSize": 25})},beforeSend: function(request) {request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");},type:'post',dataType:'json',success:function(data){console.log(data);},error: function (error) {console.log(err);},complete: function () {}});url指定访问的接⼝。

data表⽰post键值对。

beforeSend⾥我们可以设置请求头。

type表⽰请求的⽅法。

dataType表⽰希望获得的数据形式。

success表⽰成功后调⽤的函数。

error表⽰失败后调⽤的函数。

complete表⽰请求完成后的函数。

　下⾯主要介绍post提交数据的⽅式。

　我们知道post请求包括状态⾏、请求头、请求主体。

如下：<method> <request-URL> <version> --- 状态⾏<headers> --- 请求头<entity-body> --- 请求主体 协议规定， post的数据即ajax中的data必须在请求主体中，但是协议并没有规定你请求主体中的数据格式，所以，这时我们就有⾃⼰的空间规定请求主体中的数据格式了。

jQuery使⽤ajax传递json对象到服务端及contentType的⽤法⽰例⽬录0、⼀般情况下，通过键值对的⽅式将参数传递到服务端0.1 客户端代码：0.2 服务端代码：0.3 在浏览器的⽹络中查看此次请求：1、ajax 传递复杂json对象到服务端1.1 ⽅法⼀：通过formdata传值，服务端通过key获取值；1.2 ⽅法⼆：通过formdata⽅式传值，服务端读取Request.InputStream;2、content-Type 对 mvc项⽬的重要性2.1 客户端代码：2.2 服务端代码：2.3 解决⽅案：（设置contentType）2.4 其他的解决⽅案：（修改服务端代码）本⽂实例讲述了jQuery使⽤ajax传递json对象到服务端及contentType的⽤法。

分享给⼤家供⼤家参考，具体如下：0、⼀般情况下，通过键值对的⽅式将参数传递到服务端0.1 客户端代码：$.ajax({url: 'TestHandler.ashx',type: 'post',data: {name: "admin",age: 10},dataType: 'text',success: function (data) {alert(data);}})0.2 服务端代码：public void ProcessRequest(HttpContext context){string bodyText = string.Empty;using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream)){bodyText = bodyReader.ReadToEnd();}string name= context.Request["name"].ToString();// "admin"string age = context.Request["age"].ToString();// "10"context.Response.ContentType = "text/plain";context.Response.Write(bodyText);// "name=admin&age=10"}0.3 在浏览器的⽹络中查看此次请求：从上⾯的截图中可以看出，post请求，是将formdata中键值对⽤符号“&”相连，拼接成⼀个字符串，传递到服务端，服务端可以通过key来获取值，或从request的body中读取整个字符串；1、ajax 传递复杂json对象到服务端1.1 ⽅法⼀：通过formdata传值，服务端通过key获取值；客户端代码：var user1 = {username: 'admin',age: 10};var user2 = {username: 'test',age: 11};var userArr = [];userArr.push(user1);userArr.push(user2);$.ajax({url: 'TestHandler.ashx',type: 'post',//contentType: 'application/json',//contentType:"application/x-www-form-urlencoded; charset=UTF-8",data: {Users: JSON.stringify(userArr)},dataType: 'text',success: function (data) {alert(data);}})服务端代码：public void ProcessRequest(HttpContext context){string contentType= context.Request.ContentType;// "application/x-www-form-urlencoded; charset=UTF-8"string users = context.Request["Users"].ToString();dynamic obj = JsonConvert.DeserializeObject(users);context.Response.ContentType = "text/plain";context.Response.Write(obj[0].username);// "admin"}1.2 ⽅法⼆：通过formdata⽅式传值，服务端读取Request.InputStream;前端代码：var user1 = { username: 'admin', age: 10 };var user2 = { username: 'test', age: 11 };var userArr = [];userArr.push(user1);userArr.push(user2);$.ajax({url: 'TestHandler.ashx',type: 'post',//contentType: 'application/json',//contentType:"application/x-www-form-urlencoded; charset=UTF-8",data: JSON.stringify(userArr),dataType: 'text',success: function (data) {alert(data);}})服务端代码：public void ProcessRequest(HttpContext context){string contentType= context.Request.ContentType;//"application/x-www-form-urlencoded; charset=UTF-8"string bodyText = string.Empty;using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream)){bodyText = bodyReader.ReadToEnd();// [{"username":"admin","age":10},{"username":"test","age":11}]}dynamic obj = JsonConvert.DeserializeObject(bodyText);context.Response.ContentType = "text/plain";context.Response.Write(obj[0].username);// "admin"}通过浏览器查看此次请求：从图中可以看出，content-Type 为application/x-www-form-urlencoded，所以浏览器尝试将传输的数据解析成key-value的形式，但实际在ajax中的data中设置的是⼀个json字符串，⽆法解析成key-value的形式，故在服务端⽆法通过key来获取值；只能从Request.InputStream获取。

实例通过 AJAX 加载一段文本： jQuery 代码： $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"",async:false}); $("#myDiv").html(htmlobj.responseText); }); });HTML 代码： <div id="myDiv"><h2>321 导航</h2></div> <button id="b01" type="button"></button>亲自试一试定义和用法ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。

简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建 的 XMLHttpRequest 对象。

大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获 得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

语法jQuery.ajax([settings])参数 settings描述 可选。

用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

参数 options 类型：Object可选。

AJAX 请求设置。

所有选项都是可选的。

async 类型：Boolean 默认值: true。

默认设置下，所有请求均为异步请求。

如果需要发送同步请求，请将此选项设 置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

没有落叶的秋-博客:/s/blog_8fbeeb59010153d3.html Jquery遍历json的两种数据结构简介什么是JSON？JSON 即JavaScript Object Natation(Java对象表示法)，它是一种轻量级的数据交换格式，非常适合于服务器与JavaScript 的交互。

简而言之，JSON就是JavaScript交换数据的一种格式。

例子如下：{"username":"coolcooldool","password":"1230","usertype":"superadmin" }{"list":[{"password":"1230","username":"coolcooldool"},{"password":" thisis2","username":"okokok"}]}第二种是有数组的情况，我也不用文字表述JSON到底是怎么构成的了，相信长眼睛的人都看懂了。

为什么使用JSON而不是XML？尽管有许多宣传关于 XML 如何拥有跨平台，跨语言的优势，然而，除非应用于 Web Services，否则，在普通的 Web 应用中，开发者经常为 XML 的解析伤透了脑筋，无论是服务器端生成或处理 XML，还是客户端用 JavaScript 解析 XML，都常常导致复杂的代码，极低的开发效率。

实际上，对于大多数 Web 应用来说，他们根本不需要复杂的 XML 来传输数据，XML 的扩展性很少具有优势，许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。

和返回 XML 并解析它相比，返回 HTML 片段大大降低了系统的复杂性，但同时缺少了一定的灵活性。

最近在使用JQuery的ajax方法时，要求返回的数据为json数据，在处理的过程中遇到下面的几个问题，那就是采用不同的方式来生成json数据的时候，在$.ajax方法中应该是如何来处理的，下面依次来进行说明，由于本人使用的是，所以处理的页面都是采用.net来做的！其他的方式应该是相同的吧首先给出要传的json数据：[{"demoData":"This Is The JSON Data"}]1,使用普通的aspx页面来处理本人觉得这种方式处理起来是最简单的了,看下面的代码吧$.ajax({type: "post",url: "Default.aspx",dataType: "json",success: function (data) {$( "input#showTime").val(data[0].demoData);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);}});这里是后台传递数据的代码Response.Clear();Response.Write( "[{\"demoData\":\"This Is The JSON Data\"}]");Response.Flush();Response.End();这种处理的方式将传递过来的数据直接解析为json数据，也就是说这里的前台js代码可能直接把这些数据解析成json对象数据，而并非字符串数据，如data[0].demoData，这里就直接使用了这个json对象数据2,使用webservice(asmx)来处理这种处理方式就不会将传递过来的数据当成是json对象数据，而是作为字符串来处理的，如下代码$.ajax({type: "post",url: "JqueryCSMethodForm.asmx/GetDemoData",dataType: "json", /*这句可用可不用，没有影响*/contentType: "application/json; charset=utf-8",success: function (data) {$( "input#showTime").val(eval('(' + data.d + ')')[0].demoData);//这里有两种对数据的转换方式，两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);}});下面这里为asmx的方法代码[WebMethod]public static string GetDemoData() { return"[{\"demoData\":\"This Is The JSON Data\"}]";}这里的这种处理方式就把传递回来的json数据当成了字符串来处理的，所在就要对这个数据进行eval的处理，这样才能成为真正的json对象数据，3,使用ashx文件来处理这种方式和普通的aspx的页面处理是一样的所以这里就不多做解释了！本文由淄博SEO()，淄博网站优化()整理发布，转载请注明出处。

jquery发起getpost请求_或_获取html页⾯数据备注：我们经常会遇到使⽤jquery获取某个地址下的部分页⾯内容，然后替换当前页⾯对应内容，也就是：局部刷新功能。

当然也可以使⽤get/post请求获取数据，修改数据，可以参考以下JS代码：⾛过的坑：1-$.ajax 参数： dataType 是区分⼤⼩写的，写成了datatype会不识别的2- window["Ajax"] = Ajax; 写为： window["Ajax"] =new Ajax(); 这种单例如果作为全局变量报错的话，在⾼并发的请求下会出现： window.Ajax 实例⾥参数信息是会共享，参数信息被覆盖等问题3-$.ajax Post/Get 回调⽅法使⽤window.Ajax和this访问属性，这⾥经过改造后，在函数⾥⾯声明⼀个： var _this=this; 就可以在回调函数内部实现内部实例数据共享了，也会防⽌出错下⾯JS的使⽤⽰例：new window.Ajax().Init_Two("postUrl", { u: userid, e: base64Email, t: token }, function (jsonData) { //success code}).Post();⾃定义模拟类-其中Init()⽅法是个⼈项⽬需要使⽤，⼤家可以使⽤Init_Two⽅法初始化，如上⽰例：// 2-Ajax模拟类var Ajax = function () {var _this = this;//请求路径_this.ajaxUrl = "";//传⼊的参数对象_this.data = {};//返回数据类型：json/jsonp/xml/text..._this.dataType = "text";//是否异步_this.isAsync = true,//回调函数_this.rollBack = function (result) {};_this.Init = function (handlerName, actionName, dataObject, rollBack) {_this.ajaxUrl = "/ajax/" + handlerName + ".js?action=" + actionName;_this.data = dataObject;_this.rollBack = rollBack;return _this;};_this.Init_Two = function (actionUrl, dataObject, rollBack) {_this.ajaxUrl = actionUrl;_this.data = dataObject;_this.rollBack = rollBack;return _this;};//Get请求_this.Get = function (dataType, isAsync) {if (dataType != null) {_this.dataType = dataType;};if (isAsync != null) {_this.isAsync = isAsync;};$.ajax({type: "GET",url: _this.ajaxUrl,data: _this.data,dataType: _this.dataType,async: _this.isAsync,//false代表只有在等待ajax执⾏完毕后才执⾏success: function (json) {var result = json;if (_this.dataType == "text") {try {result = JSON.parse(json);} catch (e) {result = new Function("return " + json)();}}if (_this.rollBack && _this.rollBack instanceof Function) {_this.rollBack(result);}},error: function (e) {console.log(e);}});};//获取请求地址的HTML内容(select选择器,是否异步)_this.GetHtml = function (jquerySelectDom, isAsync) {if (isAsync != null) {_this.isAsync = isAsync;}$.ajax({type: "GET",url: _this.ajaxUrl,data: _this.data,dateType: "html",//false代表只有在等待ajax执⾏完毕后才执⾏async: _this.isAsync,success: function (data) {if (jquerySelectDom != "") {var $data = $(data);//由于$data是个集合，得到的是所有⼀级节点的jquery集合，所以，先从⼀级集合中找，再从所有⼦元素中找var $result = $data.next(jquerySelectDom);if ($result.length == 0) {$result = $data.find(jquerySelectDom);}var resultHtml = "";if ($result.length > 0) {resultHtml = $result.html();}if (_this.rollBack && _this.rollBack instanceof Function) {_this.rollBack(resultHtml);}} else {return data;}}});};//普通Post请求（请求地址：postUrl,,是否异步）_this.Post = function (dataType, isAsync) {if (dataType != null) {_this.dataType = dataType;};if (isAsync != null) {_this.isAsync = isAsync;};$.ajax({type: "POST",url: _this.ajaxUrl,data: _this.data,dataType: _this.dataType,//false代表只有在等待ajax执⾏完毕后才执⾏async: _this.isAsync,success: function (json) {var result = json;if (_this.dataType == "text") {try {result = JSON.parse(json);} catch (e) {result = new Function("return " + json)();}}if (_this.rollBack && _this.rollBack instanceof Function) {_this.rollBack(result);}},error: function (e) {console.log(e);}});};//模拟Form表单请求-参数为FormData对象_this.FormPost = function () {$.ajax({type: "POST",url: _this.ajaxUrl,data: _this.data,//false代表只有在等待ajax执⾏完毕后才执⾏async: _this.isAsync,processData: false,contentType: false,success: function (json) {try {result = JSON.parse(json);} catch (e) {result = new Function("return " + json)();}if (_this.rollBack && _this.rollBack instanceof Function) { _this.rollBack(result);}},error: function (e) {console.log(e);}});};};window["Ajax"] = Ajax;。

jqueryajax调⽤springboot接⼝发送json数据⽰例，兼容跨域调⽤，解决m。

本⽂主要解决三个问题：1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题2.解决spring boot开发的微服务接⼝中的跨域问题3.ajax 发送json数据的问题昨天研究 office 外接程序开发时，发现在插件中调⽤后台由 Spring boot 开发的接⼝并传递json时总是失败，调试了半天，尝试了$.ajax，$.post等⽅法服务端均⽆法获取到正确的请求，发送到后端的请求的格式是application/www-urlencode，⽽后端接受的是application/json格式的数据，由于⽤postman测试接⼝可以正常返回，应该可以说明后台接⼝没有问题。

1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题其实在⼀开始编写后台接⼝时，也遇到了⼀些问题，因为接⼝中引⽤了⼀个项⽬本地的lib⽬录中的jar包，⽽这个jar包并未⽤maven管理，所以调试和打包上遇到了⼀些问题，以前使⽤mvn clean install就可以完成的动作，现在⼀直报错，在pom中这样修改就可以解决了：<build><!-- 加上下⾯的，mvn命令会报错，现在直接调试完毕后，mvn package即可--><resources><resource><directory>lib</directory><targetPath>/BOOT-INF/lib/</targetPath><includes><include>**/*.jar</include></includes></resource></resources><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><skip>true</skip></configuration></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifactId><configuration><skip>true</skip></configuration></plugin></plugins></build>2.解决spring boot开发的微服务接⼝中的跨域问题由于服务端⽇志中⼀直观察不到ajax调⽤的正确请求，于是祭出终极⼤杀器——抓包，打开WireShark，选择对应的⽹卡，参数设置成：ip.dst_host== 你接⼝服务器的ip && tcp.dstport ==你接⼝服务监听的端⼝抓包后发现，第⼀个HTTP请求竟然不是POST，⽽是OPTIONS：这不是我嘞个⼤擦了么…… ⽴马拿出万能钥匙——⾕歌搜索引擎开始解决问题，输⼊关键字“http options request”，看到第⼀条就应该是我要的答案了：沿着指路明灯给出的航向继续前进（）：OPTIONSThe HTTP OPTIONS method requests permitted communication options for a given URL or server. A client can specify a URL with thismethod, or an asterisk (*) to refer to the entire server.继续往下翻，看到了这段⽂字：In , a is sent with the OPTIONS method so that the server can respond if it is acceptable to send the request. In this example, we will request permission for these parameters:The header sent in the preflight request tells the server that when the actual request is sent, it will have a request method.The header tells the server that when the actual request is sent, it will have the X-PINGOTHER and Content-Type headers.我恍然⼤悟，原来是跨域调⽤的问题。

有关post的三种提交格式有关数据提交格式前端从前端往后端传数据，有三种编码⽅式urlencoded：form表单的默认⽅式form-data：form表单中指定enctype，传⽂件的⽅式json：只能⽤ajax，指定ContenType实现其中，ajax也⽀持urlencoded，是ajax的默认⽅式fromdata，ajax也⽀持，需要new⼀个fromdata对象才能⽤后端request.POST：接受urlencoded和form-data的编码⽅式，这⾥才有数据request.body：其中有json格式的编码数据，但是是bytes类型，需要⽤json模块反序列化⼀下，变成字典，才能⽤并不是前两种⽅法不在会在request.body中，⽽是request.POST只接受前两种，第三种json格式必须去请求体（request.body）⾥⾯取额外json.loads(bytes)中，3.6以上⽀持loads可以直接放bytes属性的数据，3.5及以下不⽀持form表单<form action="url" name="name" method="get/post" enctype="" target=""></form>action：url 地址，服务器接收表单数据的地址method：提交服务器的http⽅法，⼀般为post和get重点属性：enctypeapplication/x-www-form-urlencoded，默认使⽤，POST请求中，请求头中的content-type指定值就是该值。

<form action="" method="post" enctype="application/x-www-form-urlencoded"><!--form表单发送post，需要指定method，-->⽤户名：<input type="text" name="user" id="user">密码：<input type="text" name="pwd" id="pwd"><input type="submit" value="提交"></form>后端在request.POST接收multipart/form-data，指定enctype类型，才能完成传递⽂件数据。

使⽤jQuery的ajax⽅法向服务器发出get和post请求的⽅法打算写个ajax系列的博⽂，主要是写给⾃⼰看，学习下ajax的相关知识和⽤法，以更好的在⼯作中使⽤ajax。

假设有个⽹站A，它有⼀个简单的输⼊⽤户名的页⾯，界⾯上有两个输⼊框，第⼀个输⼊框包含在⼀个form表单⾥⽤来实现form提交，第⼆个输⼊框是单独的、没有包含在form⾥，下⾯就⽤这两个输⼊框来学习下jQuery的ajax。

1，前端的html和javascript代码页⾯html<main style="text-align: center; margin: 200px auto;"><h2>输⼊⽤户名</h2><form class="" action="demo01.php" method="post" style="margin-bottom: 20px;"><input id="user-name" type="text" name="username" placeholder="请填写您的⽤户名"><input type="submit" name="submit1" value="form提交1" class="input"></form><input id="user-name2" type="text" name="username2" placeholder="请填写您的⽤户名"><input type="button" name="submit2" value="ajax提交2"><div class="box"></div></main><script src="../../js/jquery-3.1.0.min.js"></script><script src="demo.js"></script>页⾯中引⼊的demo01.js代码，注意此处实现的是⼀个简单的GET请求。

post提交的常用模式摘要：一、POST提交简介1.POST方法介绍2.POST方法与GET方法的对比二、POST提交常用模式1.表单提交a.表单数据编码b.提交数据处理2.JSON提交a.JSON数据格式b.提交数据处理3.XML提交a.XML数据格式b.提交数据处理4.其他方式a.文件上传b.数据压缩正文：POST提交是HTTP协议中的一种请求方法，主要用于向服务器传输数据。

相较于GET方法，POST提交的数据更加安全和隐私，因此在许多场景中更受开发者青睐。

POST提交有多种常用模式，下面将详细介绍。

一、POST提交简介POST方法全称“POST/PUT”，是一种HTTP协议中的请求方法。

它允许客户端向服务器传输数据，主要用于提交表单、上传文件等操作。

与GET方法相比，POST提交的数据更加安全和隐私，因为GET方法传输的数据会在浏览器地址栏中显示，而POST提交的数据则不会显示。

二、POST提交常用模式1.表单提交表单提交是POST提交中最常见的应用场景。

表单数据需要进行编码，通常采用UTF-8编码。

编码后的数据通过HTTP请求发送给服务器，服务器端接收到数据后进行解析和处理。

2.JSON提交JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写。

在POST提交中，可以将数据以JSON格式进行编码，然后通过HTTP请求发送给服务器。

服务器端接收到JSON数据后，可以进行解析和处理。

3.XML提交XML（eXtensible Markup Language）是一种可扩展的标记语言，用于描述数据结构和数据交换。

在POST提交中，可以将数据以XML格式进行编码，然后通过HTTP请求发送给服务器。

服务器端接收到XML数据后，可以进行解析和处理。

4.其他方式除了上述三种常用模式外，POST提交还可以用于文件上传、数据压缩等场景。

文件上传通常需要使用multipart/form-data编码，而数据压缩则可以使用gzip等压缩算法，以减小传输的数据量。

、jQuery的基本用法:随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、 jQuery、mootools、Bindows以及国内的JSVM框架等，jQuery是继prototype之后的又一个优秀的Javascript框架。

它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript 以及Ajax 编程。

它具有如下一些特点：1. 代码简练、语义易懂、学习快速、文档丰富。

2. jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。

3. jQuery支持CSS1-CSS3,以及基本的xPath。

4. jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。

5. 可以很容易的为jQuery扩展其他功能。

6. 能将JS代码和HTML代码完全分离，便于代码和维护和修改。

7. 插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

使用方法(同prototype)在需要使用JQuery的页面中引入JQuery的js文件即可。

例如：<script type="text/javascript" src="js/jquery.js"></script>引入之后便可在页面的任意地方使用jQuery提供的语法。

三、学习教程及参考资料请参照《jQuery中文API手册》和/visual/cn/index.xml推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》(说明：以上文档都放在了【附件】中)四、语法总结和注意事项1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath 条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

Jquery中$.get（）,$.post（）,$.ajax（）,$.getJSON（）的⽤法总结详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()⼀，$.get(url,[data],[callback])说明：url为请求地址，data为请求数据的列表，callback为请求成功后的回调函数，该函数接受两个参数，第⼀个为服务器返回的数据，第⼆个参数为服务器的状态，是可选参数。

⽽其中，服务器返回数据的格式其实是字符串形势，并不是我们想要的json数据格式，在此引⽤只是为了对⽐说明复制代码代码如下:$.get("data.php",$("#firstName.val()"),function(data){$("#getResponse").html(data); }//返回的data是字符串类型);⼆，$.post(url,[data],[callback],[type])说明：这个函数跟$.get()参数差不多，多了⼀个type参数，type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式⼀样，都是字符串的复制代码代码如下:$.post("data.php",$("#firstName.val()"),function(data){$("#postResponse").html();},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的);三，$.ajax(opiton)说明：$.ajax()这个函数功能强⼤，可以对ajax进⾏许多精确的控制，需要详细说明的请参照相关资料复制代码代码如下:$.ajax({url: "ajax/ajax_selectPicType.aspx",data:{Full:"fu"},type: "POST",dataType:'json',success:CallBack,error:function(er){BackErr(er);}});四，$.getJSON(url,[data],[callback])复制代码代码如下:$.getJSON("data.php",$("#firstName.val()"),function(jsonData){$("#getJSONResponse").html(jsonData.id);}//⽆需设置，直接获取的数据类型为json，所以调⽤时需要使⽤jsonData.id⽅式);When Ajax meets jQuery 基于AJAX的应⽤现在越来越多，⽽对于前台开发⼈员来说，直接和底层的HTTPRequest打交道⼜不是⼀件令⼈愉快的事情。

post json 简单参数1. 什么是 post json 简单参数？在网络编程中，post json 简单参数是一种用于向服务器发送数据的方式。

它的格式是 JSON 格式的数据，可以包含多个参数，用于向服务器传递信息或执行相应的操作。

2. post json 简单参数的格式post json 简单参数的格式通常为：{"参数1": "数值1","参数2": "数值2",...}其中，参数和数值之间使用冒号分隔，不同参数之间使用逗号分隔。

3. post json 简单参数的使用场景post json 简单参数通常用于前端向后端发送数据或请求。

当用户在前端页面上填写了一些信息并点击提交按钮时，可以将这些信息打包成JSON 数据并通过 post 请求发送给后端服务器。

4. post json 简单参数的优点相比于传统的表单提交方式，post json 简单参数具有以下优点：1) 可以包含更复杂的数据结构，例如嵌套对象或数组；2) 可以方便地在前端和后端之间传递数据；3) 可以使用现代化的网络编程框架，如 Axios、Fetch 等。

5. post json 简单参数的示例假设有一个前端页面，其中包含一个用户名和密码的表单。

用户在该表单中输入了用户名和密码，并点击了提交按钮。

接下来，前端页面可以使用 post json 简单参数的方式将这些数据发送给后端服务器，示例如下：{"username": "张三","password": "xxx"}当后端收到这个 post 请求后，就可以解析出用户名和密码，并进行相应的验证或处理。

6. post json 简单参数的注意事项在使用 post json 简单参数时，需要注意以下几点：1) 需要确保 JSON 数据的合法性，即参数和数值的对应关系要正确，格式要符合 JSON 规范；2) 需要考虑跨域请求的问题，确保前端和后端服务器在同一域下；3) 需要考虑网络安全性，避免因为 post json 简单参数的使用而引发安全漏洞。

JQuery中Ajax的操作完整例⼦Java软件开发中，后台中我们可以通过各种框架，像SSH等进⾏对代码的封装，⽅便我们对Java代码的编写，例如，Struts,SpringMVC对从前台到action的流程进⾏封装控制，使我们只需要进⾏⼀些简单配置就可以实现；⽽spring进⾏了对各种对象的管理进⾏封装，提供了AOP编程的⽅式，⼤⼤⽅便了我们；⽽hibernate和IBatis则是对JDBC代码进⾏封装，不需要我们每次都写那些重复⽽繁杂的JDBC代码。

前台呢，对于页⾯⼀些效果，验证等，我们都是通过JavaScript语⾔进⾏完成的，但是它也就像我们的Java代码⼀样，是最前台语⾔最基础的，⽽jQuery则是对js代码进⾏封装⽅便我们前台代码的编写，⽽且它还有⼀个⾮常⼤的优势就是解决了浏览器的兼容问题，这也是我们使⽤它⾮常重要的原因之⼀。

⽽现在为了满⾜⽤户的需求，Ajax（Asynchronous Javascript + XML）异步刷新起到了⽆可⽐拟的作⽤，以前写Ajax操作，总是需要我们想JDBC代码⼀样进⾏⼏个必备的步骤：AJAX——核⼼XMLHttpRequest对象，⽽JQuery也对Ajax异步操作进⾏了封装，这⾥看⼀下⼏种常⽤的⽅式。

$.ajax，$.post， $.get， $.getJSON。

⼀， $.ajax，这个是JQuery对ajax封装的最基础步，通过使⽤这个函数可以完成异步通讯的所有功能。

也就是说什么情况下我们都可以通过此⽅法进⾏异步刷新的操作。

但是它的参数较多，有的时候可能会⿇烦⼀些。

看⼀下常⽤的参数：var configObj = {method //数据的提交⽅式：get和posturl //数据的提交路劲async //是否⽀持异步刷新，默认是truedata //需要提交的数据dataType //服务器返回数据的类型，例如xml,String,Json等success //请求成功后的回调函数error //请求失败后的回调函数}$.ajax(configObj);//通过$.ajax函数进⾏调⽤。