大话Ajax，详解~

其他 2020-06-18 22:42:21 阅读次数: 0

Ajax

本节源码   kt5z

XMLHttpRequest对象

       XMLHttpRequest 是浏览器接口对象，该对象的 API 可被JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为Ajax编程的核心对象。

Ajax的使用步骤

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

给定请求方式以及请求地址

xhr.open("get","http://www.baidu.com");

发送请求

xhr.send();

获取服务器端给客户端的响应数据 

xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && xhr.status == 2000){
                    document.getElementById("span").innerHTML = xhr.readyState;
                    alert(xhr.readyState);
                }
            }

好了，我们先来用实际代码来感受一下Ajax

先编写一个Servlet

@WebServlet("/alvin/MyServlet")
public class MyServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter writer = response.getWriter();
        writer.println("hello Ajax");
        writer.flush();
        writer.close();
    }
}

Jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title></title>
        <!-- 定义好了http://localhost:8080/路径,下面写个别名就可以了  -->
        <base href="<%=request.getContextPath()+"/"%>">
    </head>
    <body>
        <script type="text/javascript">
            function but() {
                var xhr = new XMLHttpRequest();
                xhr.open("post","alvin/MyServlet");
                xhr.send();
                xhr.onreadystatechange = function () {
                    if(xhr.readyState == 4 && xhr.status == 200){
                        alert(xhr.response);
                        document.getElementById("span").innerHTML = xhr.responseText;
                    }
                }
            }
        </script>

        <span id="span"></span>
        <input type="button"  value="OK" onclick="but()"/>
    </body>
</html>

JSON

       JSON(JavaScriptObjectNotation) 是一种基于字符串的轻量级的数据交换格式。易于人阅 读和编写，同时也易于机器解析和生成。JSON是 JavaScript数据类型的子集。

       在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快，更易解析。

JSON的语法规则

       JSON是按照特定的语法规则所生成的字符串结构。

       大括号表示JSON 的字符串对象。{}

       属性和值用冒号分割。{"属性":"value"}

       属性和属性之间用逗号分割。{"属性":"value","属性":"value",...}

       中括号表示数组。[{"属性":"value"...},{"属性":"value"...}]

Json

在这里插入图片描述

{“userid”:1,“username”:“admin”,“sex”:“male”}

数组

在这里插入图片描述

[{“userid”:1,“username”:“admin”},{“userid”:2,“username”:“oldlu”}]

Josn六种数据类型

       string：字符串，必须要用双引号引起来。

       number：数值，与JavaScript的number 一致。

       object：JavaScript的对象形式，{key:value}表示方式，可嵌套。

        array：数组，JavaScript的Array表示方式[value]，可嵌套。

        true/false：布尔类型，JavaScript 的boolean 类型。

        null：空值，JavaScript的null。

Jackson的使用

       在JDK中并没有内置操作,JSON格式数据的API,因此使用处理JSON格式的数据需要借助第三方类库

几个常用的类库

       Gson: 谷歌开发的 JSON 库，功能十分全面。

       FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。

       Jackson: 社区十分活跃且更新速度很快。被称为“最好的Json 解析器”

Jeson下载地址
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
在响应中使用 Jackson处理 JSON格式数据的步骤：

       添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar

       通过 jacksonAPI将 Java对象转换 JSON格式

       修改响应头，响应类型为application/json

       将结果基于字符输出流推回客户端浏览器

       在页面的中通过JavaScript的JSON.parse()函数将JSON格式的数据转换为JavaScript对象

通过Json格式在响应中传递单个对象

我们先建一个User实体类,用于后面的操作
public class User {
    private int userid;
    private String username;
 }
 //get set那些就不在文章里面写了

@WebServlet("/alvin/Single")
public class SingleObjectServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //创建User对象
        User user = new User();
        user.setUserid(1);
        user.setUsername("黄贵根");
        //使用Jackson的APL将User对象转化为JSON格式的字符串对象
        ObjectMapper objectMapper = new ObjectMapper();
        //将User对象转换为JSON格式对象
        String string = objectMapper.writeValueAsString(user);
        //设置相应类型为application/json
        response.setContentType("application/json");
        PrintWriter writer = response.getWriter();
        writer.println(string);
        writer.flush();
        writer.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>JSON格式的单个对象响应</title>
</head>
<body>
    <script type="text/javascript" charset="UTF-8">
        function but() {
            var xhr = new XMLHttpRequest();
            xhr.open("post","alvin/Single");
            xhr.send();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.response);
                    //通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象
                    var parse = JSON.parse(xhr.responseText);
                    alert(parse.userid + " " + parse.username);
                    document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;
                }
            }
        }
    </script>

    <span id="span"></span>
    <input type="button"  value="OK" onclick="but()"/>
</body>
</html>

如果是多个对象呢?用List试试吧~

@WebServlet("/alvin/MoreObjectServlet")
public class MoreObjectServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //创建第一个对象
        User user1 = new User(1,"张三");
        //创建第二个对象
        User user2 = new User(2,"黄贵根");
        //将多个对象放入到集合中
        List<User>list = new ArrayList<User>();
        list.add(user1); list.add(user2);
        //通过jackson将List转换为JSON格式的字符串对象
        ObjectMapper objectMapper = new ObjectMapper();
        String string = objectMapper.writeValueAsString(list);
        System.out.println(string);
        response.setContentType("application/json");
        PrintWriter writer = response.getWriter();
        writer.print(string);
        writer.flush();
        writer.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>JSON格式的多个对象响应</title>
</head>
<body>
<script type="text/javascript" charset="UTF-8">
    function but() {
        var xhr = new XMLHttpRequest();
        xhr.open("post","alvin/MoreObjectServlet");
        xhr.send();
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200){
                alert(xhr.response);
                //通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象
                var parse = JSON.parse(xhr.responseText);
                var temp = "";
                for(var i = 0; i < parse.length; i++){
                    alert(parse[i].userid + " " + parse[i].username);
                    temp += parse.userid + "<br/>" + parse.username;;
                }

                document.getElementById("span").innerHTML = temp;
            }
        }
    }
</script>

	<span id="span"></span>
	<input type="button"  value="OK" onclick="but()"/>
</body>
</html>

Ajax在JSON中通过Map传递数据

@WebServlet("/alvin/MapModelServlet")
public class MapModelServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Map<String,Object> map = new HashMap<String, Object>();
        map.put("userid",1);
        map.put("username","黄贵根");

        ObjectMapper objectMapper = new ObjectMapper();
        String string = objectMapper.writeValueAsString(map);
        System.out.println(string);
        response.setContentType("application/json");
        PrintWriter writer = response.getWriter();
        writer.print(string);
        writer.flush();
        writer.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title></title>
</head>
<body>
<script type="text/javascript" charset="UTF-8">
    function but() {
        var xhr = new XMLHttpRequest();
        xhr.open("post","alvin/MapModelServlet");
        xhr.send();
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200){
                alert(xhr.responseText);
                //通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象
                var parse = JSON.parse(xhr.responseText);
                alert(parse.userid + " " + parse.username);
                document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;
            }
        }
    }
</script>

	<span id="span"></span>
	<input type="button"  value="OK" onclick="but()"/>
</body>
</html>

       在 JSON 格式中可以直接使用 Map 作为传递数据的模型。因为 Map 结构本身就是 key与value的结构与JSON 格式对象模型完全匹配，所以我们可以直接将一个Map 对象转换为JSON 格式的字符串对象。这对于我们来说是一件非常方便的事情，如果我们返回的数据并没有对应的模型来存放数据，那么我们可以通过Map 来解决。

在请求中通过JSON格式传递数据

       我们除了可以在响应中通过 JSON 格式来传递数据以外，在请求中也可以使用 JSON 格式传递数据。如果在请求中使用 JSON 格式传递数据，那么提交方式需要使用 POST 方式，通过 JavaScript 中的 JSON.stringify()函数将 JavaScript 对象转换为 JSON 格式数据。通过 send方法将参数传递到 Servlet中，在 Servlet 中通过字符输入流获取 JSON格式数据。

@WebServlet("/alvin/RequestJosnServlet")
public class RequestJosnServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //通过字符输入流从请求体中获取提交的JSON格式的数据
        String string = request.getReader().readLine();
        //使用Jackson将JSON格式的字符串对象转换成Java对象
        ObjectMapper objectMapper = new ObjectMapper();
        User user = objectMapper.readValue(string,User.class);
        System.out.println(user.getUserid() + " " + user.getUsername());
        response.setContentType("application/json");
        PrintWriter writer = response.getWriter();
        writer.print(user);
        writer.flush();
        writer.close();
    }
}


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>JSON格式的单个对象响应</title>
</head>
<body>
<script type="text/javascript" charset="UTF-8">
    function but() {
        var id = document.getElementById("userid").value;
        var name = document.getElementById("username").value;
        var obj = {userid:id,username:name};
        var content = JSON.stringify(obj);
        var xhr = new XMLHttpRequest();
        xhr.open("post","alvin/Single");
        //发送
        xhr.send(content);
        alert(content);
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200){
                alert(xhr.response);
                //通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象
                var parse = JSON.parse(xhr.responseText);
                alert(parse.userid + " " + parse.username);
                document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;
            }
        }
    }
</script>
	ID<input name="userid" id="userid"/><br/>
	姓名<input name="username" id="username"/>
	<span id="span"></span>
	<input type="button"  value="OK" onclick="but()"/>
</body>
</html>

Jackson的常用注解

@JsonProperty

       此注解用于属性上，作用是把该属性的名称序列化为另外一个名称，如把username属性序列化为name，@JsonProperty("name")。

@JsonIgnore

       此注解用于属性或者方法上（一般都是定义在属性上），用来完全忽略被注解的字段和 方法对应的属性，返回的json数据即不包含该属性。

@JsonFormat

       此注解用于属性或者方法上（一般都是定义在属性上），可以方便的把 Date类型属性的值直接转化为我们想要的样式。如：@JsonFormat(pattern="yyyy-MM-ddhh:mm:ss")

Jackson工具类

package com.alvin.util;

import java.util.List;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * JSON转换工具类
 */
public class JsonUtils {

    // 定义jackson对象
    private static final ObjectMapper MAPPER = new ObjectMapper();

    /**
     * 将对象转换成json字符串。
     * <p>Title: pojoToJson</p>
     * <p>Description: </p>
     * @param data
     * @return
     */
    public static String objectToJson(Object data) {
    	try {
			String string = MAPPER.writeValueAsString(data);
			return string;
		} catch (JsonProcessingException e) {
			e.printStackTrace();
		}
    	return null;
    }
    
    /**
     * 将json结果集转化为对象
     * 
     * @param jsonData json数据
     * @param clazz 对象中的object类型
     * @return
     */
    public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {
        try {
            T t = MAPPER.readValue(jsonData, beanType);
            return t;
        } catch (Exception e) {
        	e.printStackTrace();
        }
        return null;
    }
    
    /**
     * 将json数据转换成pojo对象list
     * <p>Title: jsonToList</p>
     * <p>Description: </p>
     * @param jsonData
     * @param beanType
     * @return
     */
    public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {
    	JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
    	try {
    		List<T> list = MAPPER.readValue(jsonData, javaType);
    		return list;
		} catch (Exception e) {
			e.printStackTrace();
		}
    	
    	return null;
    }
    
}

Jquery的$ajax方法的使用

$.ajax()使用

       在JQuery 中提供了对Ajax 的封装，让我们在使用Ajax技术时变得更加容易。在 JQuery中提供了很多的基于Ajax发送异步请求的方法,如：$.ajax()、$.get()、$.post()、$.getJSON()。

@WebServlet("/alvin/jqueryAjaxServlet")
public class jqueryAjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter writer = response.getWriter();
        writer.print("hello Jquery Ajax");
        writer.flush();
        writer.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        function but() {
            $.ajax({
                type:"post",
                url:"alvin/jqueryAjaxServlet",
                success:function (result) {
                    $("#span").html(result);
                }
            });
        }
    </script>
</head>
<body>
    <span id="span"></span>
    <input type="button" value="OK" onclick="but()"/>
</body>
</html>

$.ajax()中提交数据

       在 data 属性中我们可以通过两种方式来指定需要提交的数据。一种是通过name=value&name=value 的结构。另一种是通过 JavaScript 对象来指定提交数据。无论使用哪种方式在Servlet 中都是通过request.getParameter 方法根据 name获取 value的。

@WebServlet("/alvin/DataServlet")
public class DataServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String userId = request.getParameter("id");
        String userName = request.getParameter("name");
        PrintWriter writer = response.getWriter();
        writer.print(userId + " " + userName);
        writer.flush();
        writer.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <base href="<%=request.getContextPath()+"/"%>">
        <title>Title</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">

            function but() {
                var userid = $("#userid").val();
                var username = $("#username").val();
                $.ajax({
                    type:"post",
                    url:"alvin/DataServlet",
                    data:"id=" + userid + "&name=" + username,
                    success:function (result) {
                        $("#span").html(result);
                    }
                });
            }
        </script>
    </head>
    <body>
	        ID:<input type="text" id="userid"/><br/>
	        姓名:<input type="text" id="username"/><br/>
	        <span id="span"></span>
	        <input type="button" value="OK" onclick="but()"/>
    </body>
</html>

提交JSON格式数据

       在$.ajax()中提交 JSON格式的数据需要使用 post方式提交，通过 JSON.stringify()函数将JavaScript对象转换成JSON 格式的字符串。在Servlet 中通过字符输入获取提交的 JSON格式的数据。

@WebServlet("/alvin/JSONServlet")
public class JSONServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String string = request.getReader().readLine();
        PrintWriter writer = response.getWriter();
        writer.print(string);
        writer.flush();
        writer.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <base href="<%=request.getContextPath()+"/"%>">
        <title>Title</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
    
            function but() {
                var userid = $("#userid").val();
                var username = $("#username").val();
                $.ajax({
                    type:"post",
                    url:"alvin/JSONServlet",
                    data:JSON.stringify({
                        id:userid,
                        name:username
                    }),
                    success:function (result) {
                        $("#span").html(result);
                    }
                });
            }
        </script>
    </head>
    <body>
        ID:<input type="text" id="userid"/><br/>
        姓名:<input type="text" id="username"/><br/>
        <span id="span"></span>
        <input type="button" value="OK" onclick="but()"/>
    </body>
</html>

$.ajax()处理响应中的JSON格式数据

       $.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型处理。如果响应的是 一个 JSON 格式的数据，那么 dataType 的值为“JSON”,在回调函数中我们得到的直接就是JSON字符串转换完的 JavaScript对象。不需要在使用JSON.parse()做格式的转换处理。

@WebServlet("/alvin/JSONConnverServlet")
public class JSONConnverServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json");
        String string = request.getReader().readLine();
        PrintWriter writer = response.getWriter();
        writer.print(string);
        writer.flush();
        writer.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <base href="<%=request.getContextPath()+"/"%>">
        <title>Title</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">

            function but() {
                var userid = $("#userid").val();
                var username = $("#username").val();
                $.ajax({
                    type:"post",
                    url:"alvin/JSONConnverServlet",
                    dataType:"json",
                    data:JSON.stringify({
                        id:userid,
                        name:username
                    }),
                    success:function (result) {
                        alert(result.id + " " + result.name);
                        $("#span").html(result.id + " " + result.name);
                    }
                });
            }
        </script>
    </head>
    <body>
        ID:<input type="text" id="userid"/><br/>
        姓名:<input type="text" id="username"/><br/>
        <span id="span"></span>
        <input type="button" value="OK" onclick="but()"/>
    </body>
</html>

$.get()的使用

       $.get()方法是$.ajax()方法基于 get方式发送异步请求的简化版。

语法结构

       $.get(url,function(result))

       $.get(url,data,function(result))

通过标准格式指定提交数据

       $.get(url,”name=value&name=value”,function(result))

通过JavaScript对象指定提交数据

       $.get(url,{userid:1,username:”oldlu”,......},function(result))

这里面使用的的还是DataServlet,前面写过了
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">

        function but() {
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.get("alvin/DataServlet","id=" + userid + "&name=" + username,function (result) {
                $("#span").html(result);
            })
        }
    </script>
</head>
	<body>
		ID:<input type="text" id="userid"/><br/>
		姓名:<input type="text" id="username"/><br/>
		<span id="span"></span>
		<input type="button" value="OK" onclick="but()"/>
	</body>
</html>

$.post()的使用

       $.post()方法是$.ajax()方法基于 post方式发送异步请求的简化版。

语法结构

       $.post(url,function(result))

       $.post(url,data,function(result))

通过标准格式指定提交数据

       $.post(url,”name=value&name=value”,function(result))

通过JavaScript对象指定提交数据

       $.post(url,{userid:1,username:”oldlu”,......},function(result))

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">

        function but() {
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.post("alvin/DataServlet","id=" + userid + "&name=" + username,function (result) {
                $("#span").html(result);
            })
        }
    </script>
</head>
    <body>
        ID:<input type="text" id="userid"/><br/>
        姓名:<input type="text" id="username"/><br/>
        <span id="span"></span>
        <input type="button" value="OK" onclick="but()"/>
    </body>
</html>

$.getJSON()的使用

       $.getJSON()方法是$.ajax()方法基于 get 方式发送异步请求，并将响应结果中 JSON 格式的字符串对象自动转换为 JavaScript 对象。在使用该方法时要求返回的数据必须是 JSON 格式类型。$.getJSON()方法和resp.setContentType(“application/json”)是一起使用的。

语法结构

       $.getJSON(url,function(result))

       $.getJSON(url,data,function(result))

通过标准格式指定提交数据

       $.getJSON(url,”name=value&name=value”,function(result))

       要求返回的数据格式必须是 JSON格式。

通过JavaScript对象指定提交数据

       $.getJSON(url,{userid:1,username:”oldlu”,......},function(result))

       要求返回的数据格式必须是 JSON格式。

@WebServlet("/alvin/GetJSONServlet")
public class GetJSONServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String userId = request.getParameter("id");
        String userName = request.getParameter("name");
        Map<String,String> map = new HashMap<String, String>();
        map.put("userid",userId);
        map.put("username",userName);
        //使用前面写的工具类
        String string = JsonUtils.objectToJson(map);
        response.setContentType("application/json");
        PrintWriter writer = response.getWriter();
        writer.print(string);
        writer.flush();
        writer.close();
    }
}


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">

        function but() {
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.getJSON("alvin/GetJSONServlet","id=" + userid + "&name=" + username,function (result) {
                            //根据map的键
                alert(result.userid + " " + result.username)
                $("#span").html(result.userid + " " + result.username);
            })
        }
    </script>
</head>
    <body>
        ID:<input type="text" id="userid"/><br/>
        姓名:<input type="text" id="username"/><br/>
        <span id="span"></span>
        <input type="button" value="OK" onclick="but()"/>
    </body>
</html>

serialize()方法的使用

       将form表单中的数据自动拼接成 name=value&name=value结构。

语法结构

       varparam=$(“form”).serialize();

       param的值为：name=value&name=value

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <base href="<%=request.getContextPath()+"/"%>">
        <title>Title</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">

            function but() {
                var param = $("#form").serialize();
                $.ajax({
                    type:"post",
                    url:"alvin/DataServlet",
                    data:param,
                    success:function (result) {
                        $("#span").html(result);
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form">
            ID:<input type="text" name="id" id="userid"/><br/>
            姓名:<input type="text" name="name" id="username"/><br/>
        </form>
        <span id="span"></span>
        <input type="button" value="OK" onclick="but()"/>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41424688/article/details/106741951
今日推荐
技术解析 GPT-4o：即时语音交互的突破与 GenAI 发展策略
开源大模型与闭源大模型
微信小程序授权登录获取用户的openid
亿级流量系统架构设计与实战
人工智能时代的程序设计教学与课程设计
纽交所技术问题致伯克希尔 (BRK.A) 显示跌近 100%
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
周排行
tensorflow 笔记：二（ 北大）
fork函数详解
unity单利模板
mac下的特殊键位指引（转自apple）
c语言入门-注释
Python--多任务[线程，进程，协程]
深度对抗学习在图像分割和超分辨率中的应用
【转】【Maven】Project configuration is not up-to-date with pom.xml错误解决方法
基本数据类型与常量池
部署自己的Intell项目的经历
每日归档
更多
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022