文档库 最新最全的文档下载
当前位置:文档库 › Jquery之Ajax(页面后台间数据交互)

Jquery之Ajax(页面后台间数据交互)

Jquery之Ajax(页面后台间数据交互)
Jquery之Ajax(页面后台间数据交互)

主题:Jquery之Ajax(页面后台间数据交互)内容部分

JSP页面表单数据通过Ajax,以json格式发送到后台处理,最后返回json对象,显示在页面上。

原意就打算了解一下json格式数据的传递,没打算做的多复杂,但乱码问题搞得我头都大了。

直接贴代码解释

JS文件

$("#register").click(function(){

var userFormTemp = $("form").serialize();

var userFormDecode = decodeURIComponent(userFormTemp,true);

var userForm = encodeURI(encodeURI(userFormDecode));

$.ajax({

type : "post",

url : "UserServlet",

contentType: "application/x-www-form-urlencoded; charset=UTF-8",

data : {user : userForm},

dataType : "json",

success : function(data){

$("#uname").text(https://www.wendangku.net/doc/8611654553.html,erName);

$("#addr").text(data.address);

$("#pho").text(data.phone);

$("#hob").text(data.hobby);

},

error : function(textStatus,e){

alert(e.status);

}

});

});

相关行解释:

1.var userFormTemp = $("form").serialize();

学习Ajax时看到这个方法觉得有意思就拿来试验一下,serialize() 方法通过序列化表单值,创建URL 编码文本字符串。输出的格式为:name=value&name 1=value1&name2=value2...

类似于路径后面的参数列表。get方式提交也可以直接加到路径后面传送。ajax使用与寻常无异,就是数据类型改为json:dataType : "json"。

Form2Json文件

因为要使用json格式传递数据,后台先将序列化表单后的字符串转换成json格式的字符串然后再装换成json对象。

public class Form2Json {

public JSONObject string2Json(String stringForForm) throws Exception{ String form2Json[] = stringForForm.split("&");

String jsonForStringTemp = "";

for (int i=0;i

int index = form2Json[i].indexOf("=");

jsonForStringTemp += "\""+form2Json[i].substring(0, index)+"\""

+":"+"\""+URLDecoder.decode(form2Json[i].substring(index+1,for m2Json[i].length()),"UTF-8")+"\""+",";

}

String jsonForString = "{" + jsonForStringTemp +"}";

JSONObject jo = JSONObject.fromObject(jsonForString);

return jo;

}

}

主要就是做些字符串的截取。

Servlet文件

public void doGet(HttpServletRequest request, HttpServletResponse respo nse)

throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

String s = request.getParameter("user");

s = URLDecoder.decode(s,"UTF-8");

Form2Json f2j = new Form2Json();

JSONObject jo = null;

try{

jo = f2j.string2Json(s);

}catch(Exception ex){

ex.printStackTrace();

}

out.print(jo);

out.flush();

out.close();

}

public void doPost(HttpServletRequest request, HttpServletResponse re sponse)

throws ServletException, IOException {

doGet(request,response);

}

jsp文件

Json

服务端代码:

jquery里面Ajax几种不同的调用方法

深圳网站建设 :https://www.wendangku.net/doc/8611654553.html, jquery 里面Ajax 几种不同的调用方法 我们经常会使用ajax 去调用我们的.net 里面的ashx 去实现无刷新调用数据的方法,下面我们就来讲一下我们常用的几种方法。 第一种方法是load 方法,下面是我们的代码 //url.ashx 是调用的地址,data 是返回的信息 $(".div").load("url.ashx", function (data){ //得到的信息 }); //url.ashx 是调用的地址,data 是返回的信息,type 是参数类型,有post ,与get 两种,datatype 是返回参数的类型,id 是传入的参数 第二种方法就是$.ajax 方法,代码如下 $.ajax({ url: "url.ashx", type: "GET", dataType: "json", data: { id: "1" }, success: function (data) { //得到的信息 } }); //url.ashx 是调用的地址,data 是返回的信息,id 是传入的参数 第三种方法就是$.get 方法,代码如下 $.get("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 }); //url.ashx 是调用的地址,data 是返回的信息,id 是传入的参数 第四种方法就是$.post 方法,代码如下 $.post("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 });

jquery ajax实现跨域请求的方法

这篇文章主要介绍了jquery+ajax实现跨域请求的方法,详细介绍了前台及后台的处理方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了jquery+ajax实现跨域请求的方法。分享给大家供大家参考。具体实现方法如下: 说明:这里的datatype 为jsonp ;type 只能为get 前台请求代码如下: 代码如下: $.ajax({ type: get, url: , datatype: jsonp, jsonp: jsoncallback, success: function (result) { alert(result.success); alert(result.content); }, error: function (result, status) { //处理错误 } }); 后台处理代码validaccountsexists.aspx如下: 代码如下: string accounts = gamerequest.getquerystring(accounts); string jsoncallback = gamerequest.getquerystring(jsoncallback); response.contentencoding =system.text.encoding.utf8; response.contenttype = application/json; response.write(jsoncallback + ({\success\:\true\,\content\:\ + accounts + \})); response.end(); 希望本文所述对大家的jquery程序设计有所帮助。

jQuery调用AJAX异步操作超清晰教程

JQUERY AJAX异步操作详细说明 AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和XML)。它并非一种新的技术,而是以下几种原有技术的结合体。 1)使用CSS和XHTML来表示。 2)使用DOM模型来交互和动态显示。 3)使用XMLHttpRequest来和服务器进行异步通信。 4)使用javascript来绑定和调用。 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型: 1)不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制 权马上就被返回到浏览器。界面不会出现白板,在得到服务器响应之前 还可以友好的给出一个加载提示。 2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数,待 服务器响应到达时,触发回调函数,并且传递所需的少量数据。“按需 取数据”也降低了服务器的压力。 3)不需要使用隐藏或内嵌的框架。在XHR对象之前,模拟Ajax通信通常 使用hack手段,如使用隐藏的或内嵌的框架(