jQuery-AJAX

来源：互联网发布：java魔法门2手机版攻略编辑：程序博客网时间：2024/05/23 16:45

一.serialize() 与 serializeArray()

1..serialize() 方法使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作，比如 (“input,textarea,select”).serialize();同样也可以对整个表单对象进行操作，比如( “form” ).serialize();在这种情况下，jQuery成功的控制表单的序列化。只有form元素检查它们所包含的输入框，在所有其他情况下，输入元素要序列化应该是集合的一部分传递给.serialize()方法。选择集合中表单和它子元素在序列化的字符串会导致重复。
注意: 只有 “successful controls”可以被序列化成字符串。其中，提交按钮的值不会被序列化。另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有 name 属性。此外，复选框（checkbox）和单选按钮（radio）(input 类型为 “radio” 或 “checkbox”)的值只有在被选中时才会被序列化。另外，文件选择元素的数据也不会被序列化。
2..serializeArray() 方法和serialize()方法类似，只不过它创建了一个对象组成的javascript数组，用来编码成一个JSON一样的字符串。它对表单和/或表单控件的 jQuery 集合起作用。
二. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

url (String) : 发送请求的URL地址.data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

示例：

package com.lyf.control;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;/** * Created by fangjiejie on 2017/4/29. */@WebServlet(        name="FormControl",urlPatterns = {"/form"})public class FormControl extends HttpServlet{    private String []name={"zhangsan","lisi","fangfang","haha","enen"};;    @Override    public void init() throws ServletException {    }    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        doPost(req,resp);    }    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        String username=req.getParameter("username");        String password=req.getParameter("password");        String flag="false";        for(String n:name){             if(username.equals(n)){                 flag="true";             }        }        resp.setContentType("text/html");        resp.setCharacterEncoding("utf-8");        PrintWriter out=resp.getWriter();        out.print(flag);        out.flush();        out.close();        System.out.println(username+":"+password);    }}

<%--  Created by IntelliJ IDEA.  User: fangjiejie  Date: 2017/4/29  Time: 11:14  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html>  <head>    <title>$Title$</title>    <script src="js/jquery-1.11.0.js"></script>    <script>      $(function(){        $("#btn").click(function(){          var data=$("#form").serialize();          //var data=$("#form").serializeArray();得到的是数组          $.post("form",data,function (txt) {            if(txt.indexOf("true")!=-1){              alert("用户名已存在，请重新输入");            }else{              alert("恭喜您，请继续注册");            }          },"text")        })      })    </script>  </head>  <body>  <form action="" id="form">    用户名：<input type="text" name="username" id="un"><br>    密码：<input type="text" name="password" id="pw"><br>    <input type="button" value="验证" id="btn">    <div id="msg"></div>  </form>  </body></html>

三. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求

url (String) :  发送请求的URL地址.data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

四. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。data (Map) : (可选参数) 发送至服务器的 key/value 数据。callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。

五.jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。参数列表：

这里写图片描述

示例代码：
这里我们借助JSON解析,所以要引入

package com.lyf.control;import com.alibaba.fastjson.JSON;import com.lyf.vo.Book;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;/** * Created by fangjiejie on 2017/4/29. */@WebServlet(        name="bookControl",urlPatterns = {"/book"})public class BookControl extends HttpServlet{    @Override    public void init() throws ServletException {        super.init();    }    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        doPost(req,resp);    }    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        String id=req.getParameter("id");        Book book=null;        switch (id){            case "1":                book=new Book("img/1.jpg",100,"远行");                break;            case "2":                book=new Book("img/2.jpg",200,"境界");                break;            case "3":                book=new Book("img/3.jpg",300,"萌萌哒");                break;            default:book=null;        }        String json= JSON.toJSONString(book,true);        resp.setCharacterEncoding("utf-8");        resp.setContentType("text/html");        System.out.println(json);        PrintWriter out=resp.getWriter();        out.write(json);        out.flush();        out.close();    }}

<%--  Created by IntelliJ IDEA.  User: fangjiejie  Date: 2017/4/29  Time: 12:40  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>Title</title>    <script src="js/jquery-1.11.0.js"></script>    <script>        $(function(){            $("a").mouseover(function(){                var data=$(this).attr("index");                //alert(data);                $.ajax({                  url:"book",                  data:"id="+data,//必须以键值对的形式输送                  type:"post",//前段向后端发出的请求方法类型                  dataType:"html json",//后端向前端发出的数据类型                  success:function(txt){//成功后的回调函数                       $("#pic").attr("src",txt.pic);                       $("#price").html(txt.price);                      $("#describ").html(txt.describe);                    }                })                var x=event.clientX;                var y=event.clientY;                $("#tip").css("left",x+10).css("top",y+10).css("display","block");            })        })    </script></head><body><ul>    <li><a href="" index="1">bookA</a></li>    <li><a href="" index="2">bookB</a></li>    <li><a href="" index="3">bookC</a></li></ul><div style="width:100px; height: 100px;display: none;position: absolute" id="tip" >    <img src="" alt="" id="pic" width="80" height="80">    <span id="price"></span>    <span id="describ"></span></div></div></body></html>

效果：这里写图片描述
当然还有其他方法这里就先不做赘述了，只介绍常用方法

0 0