Ajax在js中的普通使用方法步骤以及导入jquery 后的步骤

最新推荐文章于 2023-01-11 17:15:13 发布

@给我一杯酒

最新推荐文章于 2023-01-11 17:15:13 发布

阅读量401

点赞数

文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/qq_42851037/article/details/125066868

版权

Ajax在js中的普通使用方法步骤以及导入jquery 后的步骤

1：js中的普通步骤

 function ajaxQuest() {
           //1：获取XMLHttpRequest对象
           var xhr = new XMLHttpRequest();
           var name1 = document.getElementById("name").value;

           //2：调用open发起异步请求
            xhr.open("GET", "/NNdemo/ajaxx.do?name="+name1, true);

           //4:绑定事件onreadystatechange
           xhr.onreadystatechange=function(){
               if (xhr.readyState==4 && xhr.status==200){
                   alert(xhr.responseText);
               }

           }

          //3：sennd
           xhr.send();


       }*

2:导入jquery后的方法步骤

$(document).ready(function () {

        $("#name").blur(function () {

            $.ajax({
                url: "/NNdemo/ajaxx.do",
                data: {
                    name: $("#name").val(),
                    age:12

                },
                type: "GET",
                dataType: "text",
                error: function () {
                    alert("请求失败")
                },
                success: function (data) {
                   if (data == 1) {
                        alert("登录成功");
                    } else {
                        alert("用户名不存在");
                    }
                }
            });

        });

    })

3：从前端传输json 数据时表单内容常用序列化函数将表单数据转换成字符数据

var formdata=$("#form").serialize();//序列化函数

4：整体使用代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
</head>
<script src="js/jquery.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script>

    /*   function ajaxQuest() {
           //获取XMLHttpRequest对象
           var xhr = new XMLHttpRequest();
           var name1 = document.getElementById("name").value;

           //2调用open发起异步请求
            xhr.open("GET", "/NNdemo/ajaxx.do?name="+name1, true);

           //4send  绑定事件onreadystatechange
           xhr.onreadystatechange=function(){
               if (xhr.readyState==4 && xhr.status==200){
                   alert(xhr.responseText);
               }

           }
           xhr.send();
       }*/


    $(document).ready(function () {

        $("#name").blur(function () {

            $.ajax({
                url: "/NNdemo/ajaxx.do",
                data: {
                    name: $("#name").val(),
                    age:12

                },
                type: "GET",
                dataType: "text",
                error: function () {
                    alert("请求失败")
                },
                success: function (data) {
                   if (data == 1) {
                        alert("登录成功");
                    } else {
                        alert("用户名不存在");
                    }


                }
            });

        });

    })

</script>
<body>
<form action="NNdemo/ajaxx.do" method="post">
    姓名 ：<input type="text" id="name" name="name" value="adni"><br>
    年龄：<input type="text" id="age" name="age"><br>
    类型： <input type="text" id="type" name="type"><br>
    <input type="submit" value="提交" id="ti">


</form>

</body>
</html>

@给我一杯酒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax在js中的普通使用方法步骤以及导入jquery 后的步骤

Ajax在js中的普通使用方法步骤以及导入jquery 后的步骤1：js中的普通步骤 function ajaxQuest() { //1：获取XMLHttpRequest对象 var xhr = new XMLHttpRequest(); var name1 = document.getElementById("name").value; //2：调用open发起异步请求 xhr.open
复制链接

扫一扫