ajax使用方式

最新推荐文章于 2024-09-27 09:39:47 发布

zhr_superNiu

最新推荐文章于 2024-09-27 09:39:47 发布

阅读量57

点赞数

文章标签： ajax js jquery javascript

本文链接：https://blog.csdn.net/saxasx/article/details/114271505

版权

ajax使用方式

原生方式

<head>
    <meta charset="UTF-8">
    <title>原生js方式实现ajax技术</title>
    <script>
        function commitData() {
            // 第一步 创建Ajax对象
            var ajaxObj = new XMLHttpRequest();
            var value = document.getElementsByTagName("input")[0].value;
            // 第二步 给ajax对象绑定参数 （请求方式  url  是否异步）
            ajaxObj.open("POST","/ajaxDemo01",true);
            // 第三步  给服务器端发送请求
            // 如果是post请求 额外添加请求头
            ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            ajaxObj.send("username="+value);
            // 第四步接收响应结果值  responseText
            ajaxObj.onreadystatechange = function()
            {
                if (ajaxObj.readyState==4 && ajaxObj.status==200){
                   var result = ajaxObj.responseText;
                   alert(result);
                }
            }
        }
    </script>
</head>
<body>
    <form action="#" id="formData">
        用户名：<input type="text" placeholder="姓名" name="username" />
        <input type="button" value="提交" onclick="commitData();" />
    </form>

</body>

jQuery实现ajax方式（POST）

<head>
    <meta charset="UTF-8">
    <title>jQuery实现Ajax方式1</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
 <script>
        $(function () {
            $("#inp").on("click",function () {
                //获取页面中的username和password值
                //var username = $("#username").val();
                //var password = $("#password").val();
                // 走ajax方式  $.ajax()
                $.ajax({
                    // 参数列表
                    url:"/queryDemo01",
                    //data:"username="+$("#username").val()+"&password="+$("#password").val(),// 字符串拼接
                    //data:{"username":$("#username").val(),"password":$("#password").val()},
                    data:$("#formData").serialize(),// 推荐使用
                    type:"POST",
                    success:function (data) { // 请求成功时，执行该函数
                           // data  服务器响应的结果值  data----->String
                           //alert(data);// json对象
                           // 接收后端的数据  用户名和密码值 插入到对应的span标签中
                           // 将来以对象的方式接收  json
                           //alert(data.username+"-------");
                           $("#uName").html(data.username);
                           $("#uName").css("color","green");
                           //alert(data.password+"+++++++");
                           $("#pwd").html(data.password);
                           $("#pwd").css("color","red");
                    },
                    error:function () {   // 请求失败时执行该函数
                            alert("请求失败");
                    },
                    //dataType:"json"  // 设置接收到的响应数据格式   text 纯文本形式
                });
            });
        })
    </script>
</head>
<body>
      <form action="#" id="formData">
          姓名：<input id="username" type="text" name="username" placeholder="姓名" />
          <span id="uName"></span>
          密码：<input id="password" type="password" name="password" placeholder="密码" />
          <span id = "pwd"></span>
          <input id="inp" type="button" value="提交">
      </form>
</body>

jQuery实现ajax方式（POST）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#inp").on("click",function () {
                 // jQuery实现ajax的第二种方式  $.get()
                 $.get("/ajaxDemo02",                      //{"username":$("#username").val(),"password":$("#password").val()}
                        $("#formData").serialize(),
                        function (data) {
                            alert(data);
                        },
                        "text"
                     )
            })
        })
    </script>
</head>
<body>
<form action="#" id="formData">
    姓名：<input id="username" type="text" name="username" placeholder="姓名" />
    <span id="uName"></span>
    密码：<input id="password" type="password" name="password" placeholder="密码" />
    <span id = "pwd"></span>
    <input id="inp" type="button" value="提交">
</form>
</body>

动态验证

<head>
    <meta charset="UTF-8">
    <title>jQuery实现ajax方式3</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            // 当用户名输入框失去焦点查询数据库中该用户名是否存在
            // 如果存在 传回来一个数据 “该用户名太受欢迎了”  颜色为红色
            // 如果不存在  传回一个数据  "可以放心使用"   颜色为绿色
            $("#username").on("blur",function () {
                 // 使用ajax技术
                $.post("/queryUsername","username="+this.value,function (data) {
                    // 后端传回来一个数字 0-->代表没有查到  1--->查到了
                    if (data==0){
                        $("#uName").html("可以放心使用");
                        $("#uName").css("color","green");
                    } else {
                        $("#uName").html("该用户名太受欢迎了");
                        $("#uName").css("color","red");
                    }
                });
            });
        });
    </script>
</head>
<body>
<form action="#" id="formData">
    姓名：<input id="username" type="text" name="username" placeholder="姓名" />
    <span id="uName"></span>
    密码：<input id="password" type="password" name="password" placeholder="密码" />
    <span id = "pwd"></span>
    <input id="inp" type="button" value="提交">
</form>
</body>

补充：

1.on（）和click（）在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。
而动态添加的 HTML 元素，使用 click() 这种写法，点击 Delete 按钮无法删除；使用 On() 方式可以。

$("#newclick").click(function(){ 
    $(".li").append('<li>动态添加的click<button class="deleteclick">Delete</button></li>'); 
});
$("#newon").click(function(){ 
    $(".li").append('<li>动态添加的on<button class="deleteon">Delete</button></li>'); 
});

$(".li").on('click', ".deleteon", function(){
    $(this).parent().remove(); 
})
$(".deleteclick").click(function(){ 
    $(this).parent().remove(); 
});

2.$(selector).serialize()
  序列化表单值，创建 URL 编码文本字符串。
　输出标准的查询字符串：a=1&b=2&c=3&d=4&e=5

zhr_superNiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫