JQuery 的Ajax的使用
Posted lamsey16
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 的Ajax的使用相关的知识，希望对你有一定的参考价值。
JSON：一种轻量级的数据表示方法，优点：传输方便，占用字节少
XML：一种偏重量级的数据表示方法，优点：格式清晰，占用字节多，大量的字节都浪费在了标签上；
网络传输我们常使用json，因为浏览器解析方便；服务器可以利用json工具（比如：fastjson，gson）等快速的将json和java对象进行互转；
一个简单的json格式数据 {“name”:”tom”,”age”:18}
如果上面的数据用xml。可以这么表示
<user>
<name>tom</name>
<age>18</age>
</user>
<!-- Jackson Json处理工具包 --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.4.2</version> </dependency>
<dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.2.4</version> </dependency>
html页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="script/jquery-1.5.1.min.js"></script> <script type="text/javascript"> $(function(){ var url="http://localhost:8080/day06/hello"; var jsonData={ name: "John", time: "2pm" }; var fun= function(data){ alert(data.name); }; var type="json"; $.post(url,jsonData,fun,type); }); </script> </head> <body> <form action="http://localhost:8080/day06/hello2" method="get"> 用户名:<input name="username" type="text" /><br/> 密码:<input name="password" type="password" /> <br/> <input type="submit" /> </form> </body> </html>
web.xml配置处理的servlet
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>day06</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> <servlet> <servlet-name>hello</servlet-name> <servlet-class>com.lamsey.Hello</servlet-class> </servlet> <servlet-mapping> <servlet-name>hello</servlet-name> <url-pattern>/hello</url-pattern> </servlet-mapping> </web-app>
servlet的实现类：
public class Hello extends HttpServlet { private static final long serialVersionUID = 1L; @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String name = req.getParameter("name"); System.out.println("name:"+name); String time = req.getParameter("time"); System.out.println("time:"+time); //创建json对象,用于把map转换成为json字符串返回 Gson gson = new Gson(); Map map = new HashMap<>(); map.put("name", "limingxian"); String jsonString = gson.toJson(map); System.out.println(jsonString); resp.getWriter().write(jsonString); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } }
总结：
ajax与正常的java后台返回不同是，ajax会将返回的数据到data
$(function(){
var url="http://localhost:8080/day06/hello";
var jsonData={ name: "John", time: "2pm" };
var fun= function(data){
alert(data.name);
};
var type="json";
$.post(url,jsonData,fun,type);
});
JSON中两个常用的方法。
JSON对象和字符串对象的互转
JSON.stringify( json ); 此方法可以把一个json对象转换成为json字符串
JSON.parse( jsonString ); 此方法可以把一个json字符串转换成为json对象
<script type="text/javascript"> // 一个json对象 var obj = { "a" : 12, "c" : "str" }; // 把json对象转换成为字符串对象 var objStr = JSON.stringify(obj); // alert(objStr); // 把json对象的字符串，转换成为 json对象 var jsonObj = JSON.parse(objStr); alert(jsonObj); </script>
2.3、JQuery的Ajax请求(重点****)
四个Ajax请求方法
$.ajax方法
$.get方法
$.post方法
$.getJSON方法
一个表单序列化方法：serialize()表单序列化方法
如何使用上面的五个方法：
在JQuery中和Ajax请求有关的方法有四个
$.ajax请求参数
url： 请求的地址
type : 请求的方式 get或post
data : 请求的参数 string或json
success: 成功的回调函数
dataType: 返回的数据类型 常用json或text
下面的方法必须遵守参数的顺序
$.get请求和$.post请求
url:请求的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text。
Jquery的$.getJSON
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
表单的序列化
serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接，省去我们很多不必要的工作。
这样就可以在java里面对值进行获取了。
如果不用serialize()，就要一个个用选择器进行取值后封装为json用ajax传送给java后台
$("#submit").click(function(){
var url="http://localhost:8080/day06/hello";
var jsonData=$("#form01").serialize();
var fun= function(data){
alert(data.name);
};
var type="json";
$.post(url,jsonData,fun,type);
});
<form id="form01" > 用户名：<input name="username" type="text" /><br/> 密码：<input name="password" type="password" /><br/> <input id="submit" type="submit" /> </form>
以上是关于JQuery 的Ajax的使用的主要内容，如果未能解决你的问题，请参考以下文章