Ajax应用

最新推荐文章于 2024-03-05 23:02:03 发布

幸福天涯

最新推荐文章于 2024-03-05 23:02:03 发布

阅读量161

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43708793/article/details/105968811

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、Ajax简介：Ajax是由JavaScript推出的，由jQuery进行封装，方便使用；Ajax是异步请求，局部刷新，通过异步请求，请求到服务器端数据后，通过脚本修改页面的部分内容。
2、Ajax三种请求方式实现：
index.jsp

<%@page contentType="text/html; UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <script src="script/jquery-1.7.2.js"></script>
    <script>
        $(function() {
            /**
             * 第一层Ajax请求
             * 方式：$.ajax({
             *     url:'xxx',  //请求地址
             *     data:{key,value,...},  //请求参数
             *     dataType:'json',  //html,text,json,....   //返回值类型
             *     success:function(data){},   //请求成功后，返回值
             *     error:function(){},     //请求异常
             *     type:'POST'  //POST,GET   //请求方式
             * })
             **/

            /*$("#sub").click(function(){
                $.ajax({
                    url: "ajaxRequest",  //请求地址
                    data:{id:42,username:"张三",address:"测试地址！！！"},   //请求参数
                    dataType:"json",   //请求返回值结果
                    success:function(data){
                        alert(data.userName+"的登录密码是："+data.passWord);
                    },
                    error:function(data){
                        alert("请求返回值异常！！！");
                    },
                    type:"POST"    //请求方式
                });
            })*/

            /**
             * 第二层Ajax请求:简化$.ajax({})，
             * 方式：
             * $.post(
             *          'url',             //请求地址
             *          {key:value,...},   //请求参数
             *          function(data){},  //请求成功方法
             *          'json'             //返回值类型
             * )
             */
            /*$("#sub").click(function () {
                $.post('ajaxRequest', {id: 45, username: "李四", address: "李四的测试地址。"},
                    function (data) {
                        var result = "";
                        for (var i = 0; i < data.length; i++) {
                            result += "<tr>";
                            result += "<td>" + data[i].id + "</td>";
                            result += "<td>" + data[i].userName + "</td>";
                            result += "<td>" + data[i].address + "</td>";
                            result += "</tr>";
                        }
                        $("#val").html(result);
                    },
                    "json"
                );
            })*/

            /**
             * 第三层Ajax请求:简化$.get/post({})，
             * 方式：
             * $.post(
             *          'url',             //请求地址
             *          {key:value,...},   //请求参数
             *          function(data){},  //请求成功方法
             * )
             */

            $("#sub").click(function () {
                $.getJSON('ajaxRequest',
                    {id: 48, username: "王五", address: "王五的测试地址！！！！！"},
                    function (data) {
                        var result = "";
                        for (var i = 0; i < data.length; i++) {
                            result += "<tr>";
                            result += "<td>" + data[i].id + "</td>";
                            result += "<td>" + data[i].userName + "</td>";
                            result += "<td>" + data[i].address + "</td>";
                            result += "</tr>";
                        }
                        $("#val").html(result);
                    }
                )
            })

        })
    </script>
</head>
<body>
<h2>Ajax请求！！！</h2>
<br>
<hr>
<br>
<input type="submit" id="sub" value="点击测试Ajax"></input>
<br>
<hr>
<br>
<table border="1">
    <tr>
        <td>ID</td>
        <td>姓名</td>
        <td>地址</td>
    </tr>
    <tbody id="val">

    </tbody>
</table>
</body>
</html>

第一种方式(也是功能最全的方式)：

第一层Ajax请求
* 方式：$.ajax({
* url:‘xxx’, //请求地址
* data:{key,value,…}, //请求参数
* dataType:‘json’, //html,text,json,… //返回值类型
* success:function(data){}, //请求成功后，返回值
* error:function(){}, //请求异常
* type:‘POST’ //POST,GET //请求方式
* })

第二种方式(对第一种方式的简化)：

第二层Ajax请求:简化$.ajax({})，
* 方式：
* $.post(
* ‘url’, //请求地址
* {key:value,…}, //请求参数
* function(data){}, //请求成功方法
* ‘json’ //返回值类型
* )
第三种方式(对第二种方式的简化)：
第三层Ajax请求:简化$.get/post({})，
* 方式：
* $.post(
* ‘url’, //请求地址
* {key:value,…}, //请求参数
* function(data){}, //请求成功方法
* )
3、服务端数据处理：
jsonServlet .java

package Servlet;
import Model.User;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/ajaxRequest")
public class jsonServlet extends HttpServlet {
    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        String id = req.getParameter("id");
        String username = req.getParameter("username");
        String address = req.getParameter("address");
        User user = new User();
        user.setUserName(username);
        user.setAddress(address);
        user.setPassWord("123456");
        User user1 = new User();
        user1.setId(21);
        user1.setUserName("张三");
        user1.setPassWord("123456");
        user1.setAddress("这是什么东西！！！");
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user1);
        ObjectMapper mapper = new ObjectMapper();
        String result = mapper.writeValueAsString(list);
        res.setContentType("application/json;charset=utf-8");
        PrintWriter out = res.getWriter();
        out.print(result);
        out.flush();
        out.close();
    }
}

4、需要引入的包
4.1、将数据转换成json格式：

 ObjectMapper mapper = new ObjectMapper();
        String result = mapper.writeValueAsString(list);

需要引入的包：
在这里插入图片描述

4.2、将数据写出到页面的操作：

res.setContentType("application/json;charset=utf-8");
        PrintWriter out = res.getWriter();
        out.print(result);
        out.flush();
        out.close();

幸福天涯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax应用

1、Ajax简介：Ajax是由JavaScript推出的，由jQuery进行封装，方便使用；Ajax是异步请求，局部刷新，通过异步请求，请求到服务器端数据后，通过脚本修改页面的部分内容。2、Ajax三种请求方式实现：index.jsp<%@page contentType="text/html; UTF-8" language="java" pageEncoding="UTF-8" %...
复制链接

扫一扫