ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

AJAX如何使用

2021-05-08 21:01:29  阅读:145  来源: 互联网

标签:function xmlHttpRequest name url 如何 AJAX 使用 var data


@Tong

JavaScript-ajax

  • Ajax的简单实用方法(可以实现完成基础操作)

Ajax-get请求

  • jquery方法:

 $(function(){
             $("#all").click(function(){
                 $.ajax({
                     "type":"GET",
                     "url":"地址",
                     "data":{"键":"值"},
                     "dataType":"text",//返回类型
                     "success":function(data){//成功执行方法(data:返回的数据)
                         
                     },
                     "error":function(){//失败执行方法
                         alert("错误,请联系管理员")
                     }
                 })
             })
         })
 ​
  • 原生javascript方法:

     function validate() {
             var name = $("#name").val();
             if (name == null || name == "") {
                 $("#nameDiv").html("用户名不能为空!");
             } else {
                 //1.创建XMLHttpRequest对象
                 xmlHttpRequest = createXmlHttpRequest();
                 //2.设置回调函数
                 xmlHttpRequest.onreadystatechange = callBack;
                 //3.初始化XMLHttpRequest组件
                 var url = "userServlet?name=" + name+“&time="+Math.random();//服务器端URL地址,name为用户名文本框获取的值
                 xmlHttpRequest.open("GET", url, true);
                 //4.发送请求
                 xmlHttpRequest.send(null);
                 /* 使用POST方式发送请求
                 var url = "userServlet";//服务器端URL地址
                 xmlHttpRequest.open("POST", url, true);
                 xmlHttpRequest.setRequestHeader("Content-Type",
                         "application/x-www-form-urlencoded");
                 var data ="name=" + name+“&time="+Math.random();//需要发送的数据信息,name为用户名文本框获取的值
                 xmlHttpRequest.send(data);
                 */
                 //Ajax 回调函数
                 function callBack() {
                     if (xmlHttpRequest.readyState == 4
                             && xmlHttpRequest.status == 200) {
                         var data = xmlHttpRequest.responseText;
                         if (data == "true") {
                             $("#nameDiv").html("用户名已被使用!");
                         } else {
                             $("#nameDiv").html("用户名可以使用!");
                         }
                     }
                 }//end of callBack()
             }
         }//end of validate()
     ​
         /*
          *创建XMLHttpRequest对象
          */
         function createXmlHttpRequest() {
             if (window.XMLHttpRequest) {//返回值为true时说明是新版本IE或其他浏览器
                 return new XMLHttpRequest();
             } else {//返回值为false时说明是老版本IE浏览器(IE5和IE6)
                 return new ActiveXObject("Microsoft.XMLHTTP");
             }
         }
     ​

     

Ajax-Post请求方式

 $.ajax({
 "url":"url",
 "datat":"data",
 "type":"post",
 "success":function(){
 ​
 }
 })
 ​

 

标签:function,xmlHttpRequest,name,url,如何,AJAX,使用,var,data
来源: https://blog.csdn.net/weixin_50800726/article/details/116542972

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有