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

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 + '\'' +
                '}';
    }
}

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值