来自 服务器&运维 2019-12-09 07:07 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

浅析jQuery Ajax请求参数和返回数据的处理_jquery_脚本之家

刚接触学会用jQuery ajax的时候,觉得真东西好神奇,这样就可以把数据取回来了啊。然后我可以把取回来的数据渲染到页面上,一颗赛艇。

服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据。本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。

先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果:复制代码 代码如下:$.click{ $.getJSON("demo_ajax_json.js",function{ $.each(result, function.append;});该函数是简写的 Ajax 函数,等价于:复制代码 代码如下:$.ajax({ url: url, data: data, success: callback, dataType: json}); 发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象,那么在附加到 URL 之前将转换为字符串,并进行 URL 编码。传递给 callback 的返回数据,可以是 JavaScript 对象,或以 JSON 结构定义的数组,并使用 $.parseJSON() 方法进行解析。从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据:复制代码 代码如下:$.getJSON("test.js", function{ alert("JSON Data: " + json.users[3].name);});一个与asp.net实例首先给出要传的json数据:[{"demoData":"This Is The JSON Data"}]1,使用普通的aspx页面来处理本人觉得这种方式处理起来是最简单的了,看下面的代码吧复制代码 代码如下:$.ajax({ type: "post", url: "Default.aspx", dataType: "json", success: function { $.val; }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert;这里是后台传递数据的代码复制代码 代码如下:Response.Clear(); Response.Write("[{"demoData":"This Is The JSON Data"}]"); Response.Flush; 这种处理的方式将传递过来的数据直接解析为json数据,也就是说这里的前台js代码可能直接把这些数据解析成json对象数据,而并非字符串数据,如data[0].demoData,这里就直接使用了这个json对象数据2,使用webservice来处理这种处理方式就不会将传递过来的数据当成是json对象数据,而是作为字符串来处理的,如下代码复制代码 代码如下:$.ajax({ type: "post", url: "JqueryCSMethodForm.asmx/GetDemoData", dataType: "json",/*这句可用可不用,没有影响*/contentType: "application/json; charset=utf-8", success: function { $.val(eval[0].demoData);//这里有两种对数据的转换方式,两处理方式的效果一样//$.val[0].demoData);}, error: function (XMLHttpRequest, textStatus, errorThrown) { alert;下面这里为asmx的方法代码复制代码 代码如下:[WebMethod] public static string GetDemoData() { return "[{"demoData":"This Is The JSON Data"}]"; }这里的这种处理方式就把传递回来的json数据当成了字符串来处理的,所在就要对这个数据进行eval的处理,这样才能成为真正的json对象数据,我们先来看一下html模板: 复制代码 代码如下:

1.前端Ajax请求如下:

之前很早接触到项目,并不知道怎么优雅的去用jquery ajax;

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。JSON在前后台交互的过程中发挥着相当出色的作用。请接着往下看教程。

订单ID 客户ID 雇员ID 订购日期 发货日期 货主名称 货主地址 货主城市 更多信息
$.ajax({ type : "post", //async:false, url : PATH + "/product/selectPicture.action", dataType : "json", success : function { $.each{ alert;

那个时候看别人写的代码

  • 张三
  • 李四
  • 王五

一定要注意的就是里面所有的id属性,这个是一个关键。再来看一下AJAX请求和绑定数据的代码复制代码 代码如下: $.ajax({ type: "get",//使用get方法访问后台 dataType: "json",//返回json格式的数据 url: "BackHandler.ashx",//要访问的后台地址 data: "pageIndex=" + pageIndex,//要发送的数据 complete :function;},//AJAX请求完成时隐藏loading提示 success: function{//msg为返回的数据,在这里做数据绑定 var data = msg.table; $.each{ var row = $; row.find.text; row.find.text; row.find.text; row.find.text; if row.find.text; row.find.text; row.find.text; row.find.text; row.find.html("More"); row.attr;//改变绑定好数据的行的id row.appendTo;//添加到模板的容器中 });这个是jQuery的AJAX方法,返回数据并不复杂,主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $;”先把模板复制一份,接下来row.find.text;,表示找到id=OrderID的标记,设置它的innerText为相应的数据,当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式,比如这里row.find.text;有点服务器控件做模板绑定数据的感觉。所有的这些,都是放在一个静态的页面里,只通过AJAX方法从后台获取数据,所有html代码如下:复制代码 代码如下:

2 其中PATH在jsp页面中定义:

当然现在知道点,这些写法都是一个意思,还是习惯用 $.ajax() 写写吧。

姓名:

test1

 var PATH = ‘<%=path%>';

之前的数据处理,发送数据请求,然后自己通过下面的方式

性别:

订单ID 客户ID 雇员ID 订购日期 发货日期 货主名称 货主地址 货主城市 更多信息

2.1 后端java代码输出json格式数据:

var request = {};request.name = $;request.age = $;request.sex = $;//...

电话:

LOADING....

List> list = bo.selectData();response.setContentType("application/json;charset=GBK");PrintWriter out=response.getWriter(); out.write(JSONArray.fromObject;out.flush;

当时表单发送的参数项少,所以没觉得什么,到后来一个表单很多项数,也这么写,结果 request 就手工写了好多行,虽然能用吧,但是看看这样的代码就觉着哪里不对劲吧,至少很不“优雅”。

邮箱:

PageData.js就是包括上面AJAX请求和绑定数据代码的js,整个页面连form都不用,这样做有什么好处呢。再看下面一个模板复制代码 代码如下:

其中list为从数据库中查出的数据,JSONArray.fromObject需要导入json-lib-2.4-jdk15.jar包,而且这个包需要在导入几个依赖包才能用这个百度一下吧。注意返回的格式为json,和编码格式。

后来,发现其实jquery有个 serialize 的方法可以序列化表单数据,可以省事很多。

实例中,显示了一个用户姓名列表ul#userlist,一个用户详细信息层#info。值得注意的是,我给每个标签设置属性“rel”并赋值,这个很重要,将在jQuery中使用。我要实现的效果就是:当点击用户列表中任意用户的姓名,将即时显示出该用户的详细信息,如电话、EMAIL等。

  • fsdfasdf

2.2 也可以使用alibaba的fastjson1.2.8.jar包,那么后端就该这么写:

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:浅析jQuery Ajax请求参数和返回数据的处理_jquery_脚本之家

关键词: