码迷,mamicode.com
首页 > Web开发 > 详细

JQuery 的Ajax的使用

时间:2017-10-23 01:10:20      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:服务器   字符   cte   logs   method   dtd   doctype   except   _id   

 

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的使用

标签:服务器   字符   cte   logs   method   dtd   doctype   except   _id   

原文地址:http://www.cnblogs.com/limingxian537423/p/7702725.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!