【Ajax】简单了解与基础语法

最新推荐文章于 2024-09-06 22:57:14 发布

Kal1

最新推荐文章于 2024-09-06 22:57:14 发布

阅读量96

点赞数

分类专栏：前端学习文章标签： ajax js 前端

本文链接：https://blog.csdn.net/weixin_45844670/article/details/112217738

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法，用于创建更好更快以及交互性更强的web应用程序的技术。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

增加B/S的体验性

b/s：未来的主流，丙并且会爆发式的增长

产品链：H5+网页+客户端+手机端（Android+iOS）+小程序

使用ajax：注册时，输入用户名检测用户是否已经存在。登陆时，提示用户密码错误。删除数据行时，将id发到后台，后台在数据库中删除，数据库删除成功后，在页面dom中将数据行也删除

简单实现

<div>
	<p>输入要加载的地址:<span id="currentTime"></span></p>
	<p>
		<input type="text" id="url" value="http://baidu.com"></input>
		<input type="button" value="提交" onclick="">
	</p>	
</div>

<iframe style="width:100% ;height=100px" id="iframePosition">
	
</iframe>

<script>
	window.onload = function(){
		var mydate= new Date();
		document.getElementById("currentTime").innerText = mydate.getTime();
	}
		
	function loadPage(){
		var targetURL=document.getElementById("url").value;
		document.getElementById("iframePosition").src = targetURL;
	}
</script>

Ajax的核心是XMLHttpRequest对象（XHR）。XHR向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据

jQuery ajax本质就是XMLHttpRequest，对其进行封装调用

基础语法

基础方法

jQuery.get(…)
jQuery.post(…)
jQuery.ajax(…)

一个简单的向后端发送数据的ajax代码(get方式)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
    <script src="jquery.js"/>
</head>
<body>
    <div>
        <p>用户名：</p>
        <input type="text" id="txtName" onblur="a1()">
    </div>


    <script>
        function a1(){
            $.ajax({
                url:"",//待载入页面的url地址
                data:{"name":$("txtName").val()},//data：待发送的key/value参数
                success:function(data){
                    console.log(data);
                }                        
            });
        }
        // 默认情况下，Ajax 请求使用 GET 方法。
        // 如果要使用 POST 方法，可以设定 type 参数值。
        // 这个选项也会影响 data 选项中的内容如何发送到服务器。
    </script>
</body>
</html>

一个简单的向后端发送数据的ajax代码（post方式）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
    <script src="jquery.js"/>
</head>
<body>
    <div>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tbody id="content">

        </tbody>
    </div>


    <script>
       $(function(){
           $("#btn").click(function(){
               $.post("目的url",function(data){
                    console.log(data);
                    var html = "";
                    for(var i=0;i<data.length;i++){
                        //这里假定后端传来的数据是list类型
                        html += "<tr>" + 
                        "<td>"+data[i].name+"<td>"+
                        "<td>"+data[i].age+"<td>"+
                        "<td>"+data[i].sex+"<td>"+
                        "<tr>"    
                    }
                    $("#content").html(html);
               })
           })
       })
    </script>
</body>
</html>

对登陆用户的验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
    <script src="jquery.js"/>
    <script>
        function a1(){
            $.post({
                url:"",
                data:{"name":$("#name").val()},
                success:function (data){
                    if(data.toString=="ok"){
                        $("#userinfo").css("color","green");
                    }else{
                        $("#userinfo").css("color","red");
                    }
                    $("#userinfo").html(data);                   
                }
            })
        }

        function a2(){
            $.post({
                url:"",
                data:{"pwd":$("#pwd").val()},
                success:function (data){
                    if(data.toString=="ok"){
                        $("#pwdinfo").css("color","green");
                    }else{
                        $("#pwdinfo").css("color","red");
                    }
                    $("#pwdinfo").html(data);                   
                }
            })
        }
    </script>

</head>
<body>
    <div>
        <p>用户名
            <input type="text" id="name" onblur="a1()">
            <span id="userinfo"></span>    
        </p>
        <p>密码
            <input type="text" id="pwd" onblur="a2()"> 
            <span id="userinfo"></span>     
        </p>
    </div>

</body>
</html>

总结

三部曲：

编写对应的controller，返回字符串或者json数据
编写ajax请求：

url ：controller请求
data：键值对
success：回调函数

给ajax绑定事件，点击（click），失去焦点（onblur），键盘弹起（keyup）

Kal1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Ajax】简单了解与基础语法

简介AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法，用于创建更好更快以及交互性更强的web应用程序的技术。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。增加B/S的体验性b/s：未来的主流，丙并且会爆发式的增长产品链：H5+网页+客户端+手机端（Android+iOS）+小程序使用ajax：注册时，输入用户名检测用户是否已经存在。
复制链接

扫一扫

专栏目录