原生发送Ajax，jQuery发送Ajax

zyy_wx

已于 2022-03-16 15:33:31 修改

阅读量454

点赞数

文章标签： ajax jquery javascript

于 2022-03-16 15:31:47 首次发布

本文链接：https://blog.csdn.net/zyy_wx/article/details/123527533

版权

1、原生ajax

<script>
var ajax = new XMLHttpRequest();
  // 配置参数
  ajax.open("POST", "http://127.0.0.1:3000/users/login/", true);
  // 定义头部
  ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  // 发送数据
  ajax.send(`username=${username}&&password=${password}`);
  // 响应函数
  ajax.onreadystatechange = function() {
    if (ajax.readyState == 4) {
     console.log(ajax.readyState);
     var res = JSON.parse(ajax.responseText);
      if (res.status) {
       alert(res.msg);
       window.location.href = "article-list.html";
      }
     }
   }
 </script>

2、jQuery发送ajax

<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  function a1(){
   // 所有参数
   // url:待载入页面的URL地址,JSON
   // data:待发送 key/value 参数
   // success:载入成功时回调函数
   // data:封装了服务器返回的数据
   // status:状态
   $.post({
    url:"${pageContext.request.contextPath}/ajax/a1",
    data:{"name":$("txtName").val()},
    success:function(data,status){
     console.log(data);
     console.log(status)
    }
  });
</script>