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
    评论
jQuery是一种JavaScript库,ajax是一种能够向服务器端发送接收请求的技术。在Web开发中,ajax技术可以让页面在不刷新的情况下向服务器请求数据,使得页面更加丰富和动态。 下面就是一个jQuery ajax请求的实例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery Ajax Request</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <!--需要引入jQuery库--> <script> $(document).ready(function() { $("#btn").click(function() { //当按钮被点击时 $.ajax({ url: "data.php", //请求地址 data: {"name":"Tom", "age":18}, //请求参数 type: "post", //请求方式 dataType: "json", //返回值类型 success: function(result) { //请求成功时的回调函数 $("#result").html(result.name + "今年" + result.age + "岁"); //将返回值显示在页面上 }, error: function() { //请求失败时的回调函数 alert("请求失败"); } }); }); }); </script> </head> <body> <button id="btn">请求数据</button><br><br> <div id="result"></div> </body> </html> ``` 在这个实例中,我们使用了jQueryajax函数,这个函数有很多参数,其中一些常用的参数包括: - url:请求地址; - data:请求参数; - type:请求方式(常用的有get和post); - dataType:返回值类型(常用的有json和html); - success:请求成功时的回调函数; - error:请求失败时的回调函数。 在按钮被点击时,我们向服务器请求数据,服务器通过data.php来处理请求,并返回一个json格式的数据: ```php <?php $name = $_POST["name"]; $age = $_POST["age"]; $result = array("name" => $name, "age" => $age); echo json_encode($result); ?> ``` 当请求成功时,我们将返回的数据解析出来,并将其显示在页面上。如果请求失败,我们就弹出一个提示框。通过这个实例,我们可以学习到如何使用jQuery来进行ajax请求,以及如何处理请求成功和失败的情况。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值