Ajax实现--jQuery

1.普通的html数据格式，这个我用jquery的$.ajax()函数来实现，(jquery提供了三种函数，$.ajax(), $.get(), $.post()，从名字我们就能看出来实现方式)

ajax.jsp页面代码如下：

<script type="text/javascript" src="scripts/jquery-1.8.1.js"></script><script type="text/javascript">/*$(function(){$("#button1").click(function(){$.ajax({type: "GET",url: "AjaxServlet",success: function(returnedData){$("#value").val(returnedData);},data: {"param1": $("#param1").val(), "param2": $("#param2").val()}});}); })*/$(function(){$("#button1").click(function(){$.ajax({ type: "POST", 　　//请求方式url: "AjaxServlet",　　//请求的urldataType: "html",　　//响应数据格式data: {'param1': $("#param1").val(), 'param2': $("#param2").val()}, 　　//发送请求时携带的参数，以javascript对象形式写success: function(returnedData){　　//响应成功回调函数，returnedDate会响应过来的数据，不管是什么格式都是returnedDate$("#value").val(returnedData);}});});});</script>

2.xml数据格式，这里使用的是jquery的$.post()方式

这里服务器端要注意一下，因为响应过来的是xml格式，所以服务端响应格式需要修改一下：

//这段代码设置响应的数据格式resp.setContentType("text/xml charset=utf-8");//设置没有缓存resp.setHeader("pragma", "no-cache");resp.setHeader("cache-control", "no-cache");PrintWriter out = resp.getWriter();OutputFormat format = new OutputFormat();XMLWriter xmlWriter = new XMLWriter(out, format.createPrettyPrint());xmlWriter.write(document);

前端xml.jsp代码如下：

$("#button").click(function(){$.post("XMLServlet",{"name": $("select").val()},function(returnedData, status){var id = $(returnedData).find("id").text();var name = $(returnedData).find("name").text();var age = $(returnedData).find("age").text();var address = $(returnedData).find("address").text();var html = "<table border='1' align='center' width='50%'><tr><th>id</th><th>name</th><th>age</th><th>address</th></tr><tr><th>" + id + "</th><th>" + name + "</th><th>" + age + "</th><th>" + address + "</th></tr></table>";$("#theBody table:eq(0)").remove();$("#theBody").append(html);})})

呵呵，代码是不是比$.ajax()这种方式简化了些呢，因为响应过来的returnedDate是xml格式，jquery提供了find()方法直接可以找到xml对应的子元素，然后调用text()方法得到子元素中的value值。

3.JSON数据格式，使用的是$.get()方式，在jquery里面强烈建议使用这种格式来传输数据，因为其格式完全匹配javascript。

同样，服务器端代码需要坐下修改(这里产生json数据格式我用的是google提供的gson.jar):

//如果返回的是xml就写成 "text/xml"， 如果返回的是json则要写成 "application/json"resp.setContentType("application/json; charset=utf-8");//设置没有缓存resp.setHeader("pragma", "no-cache");resp.setHeader("cache-control", "no-cache");PrintWriter out = resp.getWriter();Gson gson = new Gson();String result = gson.toJson(list);// System.out.println(result); out.println(result);out.flush();

同样前端的json.jsp代码如下：

$(function(){$("#button1").click(function(){$.get("GsonServlet", {}, function(returnedData, status){var html = "<table border='1' align='center' width='50%'><tr><th>id</th><th>name</th><th>homeAddress</th><th>companyAddress</th></tr>";for(var i = 0; i < returnedData.length; i++){var id = returnedData[i].id;var name = returnedData[i].name;var homeAddress = returnedData[i].address.homeAddress;var companyAddress = returnedData[i].address.companyAddress;html += "<tr><th>" + id + "</th><th>" + name + "</th><th>" + homeAddress + "</th><th>" + companyAddress + "</th></tr>";}$("#body1 table:eq(0)").remove();$("#body1").append(html);})})});

转载于:https://www.cnblogs.com/toge/p/6114708.html

总结

以上是生活随笔为你收集整理的Ajax实现--jQuery的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。