jQuery多种接收发送ajax请求方法

tpaer

已于 2022-02-14 21:00:34 修改

阅读量911

点赞数 2

分类专栏： java html 文章标签： jquery ajax javascript

于 2022-01-04 19:47:41 首次发布

本文链接：https://blog.csdn.net/qq_18980147/article/details/122310068

版权

java 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="jquery-3.6.0.js"></script>
  <script>
      $(function (){
          $("input").blur(function () {
              //第一种ajax
              $.ajax({
                  "url":"/test/doajax",
                  //通过流或者参数获取后台都可以实现
                  "data":"name="+ $("input").val(),
                  "type":"post",
                  "dataType":"text",
                  success:function (res) {
                      $("div").html(res);
                  }
              })

              //第二种 前台发json对象后台返回文本
              //get方法
              var user = {};
              user.username = $("input").val();
              $.get("/test/doajax",user,function (data) {
                  $("div").html(data.username);
              },"json");

              //post方法
              var user = {};
              user.username = $("input").val();
              $.post("/test/doajax",user,function (data) {
                  $("div").html(data.username);
              },"json");


              //化简把json参数换到前面getJson
              var user = {};
              user.username = $("input").val();
              $.getJSON("/test/doajax",user,function (data) {
                  $("div").html(data.username);
              });

              //第三种
              var user = {};
              user.username = $("input").val();
              $.ajax({
                  "url":"/test/doajax",
                  "data":user,
                  "type":"post",
                  "dataType":"json",
                  success:function (res) {
                      $("div").html(res.username);
                  },
                  error:function () {
                      alert("出错了！");
                  }
              })


          });

          //第四种 简化不易读懂 所有操作在后端完成
          $("div").load("/test/load");
      });

  </script>
</head>
<body>
<input type="text">
  <div></div>
</body>
</html>

Servlet

@WebServlet("/doajax")
public class DoAjax extends HttpServlet {
    @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 {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        /*BufferedReader br = new BufferedReader(new InputStreamReader(req.getInputStream(),"utf-8"));
        String s = br.readLine();*/

        String name = req.getParameter("username");
        System.out.println(name);

        User user = new User(name,"666");


        PrintWriter out = resp.getWriter();
        out.write(JSON.toJSONString(user));
       /* out.write(name);*/
        out.flush();
        out.close();

    }
}

@WebServlet("/load")
public class DoLoad extends HttpServlet {
    @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 {
        resp.setContentType("text/html;charset=utf-8");
        List<User> list = new ArrayList<>();
        list.add(new User("tp1","111"));
        list.add(new User("tp2","222"));
        list.add(new User("tp3","333"));

        String str = "<table>";
        for (User u:list) {
            str+="<tr>";
            str+="<td>";
            str += u.getUsername()+"--"+u.getPassword();
            str+="</td>";
            str+="</tr>";
        }
        str += "</table>";

        PrintWriter out = resp.getWriter();
        out.write(str);
        out.flush();
        out.close();
    }
}

User类

package vo;

public class User {
    private String username;
    private String password;

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

    public User() {
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

tpaer

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery多种接收发送ajax请求方法

前端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.6.0.js"></script> <script> $(function (){ $("input").blur(fun
复制链接

扫一扫

专栏目录