jQuery|Ajax教程

介绍

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

可以做到

  • 无刷新跳转
  • 无刷新提交
  • 等等等。。

jQuery提供的方法有

  •  load() 此方法用于 从服务器加载数据 ,放入所指的位置
  • get() 提交表单常用的提交方式
  • post() 提交表单常用的提交方式

load ()

代码演示

先创建一个PHP文件“文件名字随意”(代码如下) (访问到)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery|Ajax教程-微渺WeiMiao</title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="mx-auto bg-warning" style="width:700px;text-align:center;padding:30px;">
      <h1><a id = "2">点击我</a></h1>
        
        <div class="container" id = "1">
            <h5>欢迎WeiMiao博客,当前介绍的是 Ajax中的“load()”方法</h5>
        </div>
    </div>
</body>
</html>

<!--教程核心代码-->
<script>
    $(function (){
  		//监听ID等于2,当按下时触发
        $('#2').click(function(){
 			//load() 方法从服务器加载名字为“1.php”的文件代替ID为1的内容
            $('#1').load("1.php");

        });
    });
</script>

再创建一个名字为“1.php”的文件(代码如下)

<h1>WEIMIAO.XIN</h1>

当你点击“点击我”他会变成“WEIMIAO.XIN”

分析代码

如果没看过源代码请先去看源代码

看图片!
黄色:对应的是两个相同的ID,解析代码得到的是当单击触发时执行什么
红色:对应的是ID是2,当我们触发单击事件时,ID=2里的内容就会修改

蓝色地方的代码正是我们创建的新的PHP文件“1.php”

get()

演示代码

先创建一个PHP文件“文件名字随意”(代码如下) (访问到)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery|Ajax教程-微渺WeiMiao</title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="mx-auto bg-warning" style="width:700px;text-align:center;padding:30px;">

        文本1<input type="text" id = "text1"><br />
        文本2<input type="text" id = "text2"><br />
        <a id = "submit">提交数据</a>
        <div id = "get"></div>
    </div>
</body>
</html>

<!--教程核心代码-->
<script>
    $(function (){
  		//监听ID等于submit,当按下时触发
        $('#submit').click(function(){
            $.get(
                //提交的地址  get再url常用的格式提交数据  提交的内容
                "1.php?t1="+$('#text1').val()+'&&t2='+$('#text2').val() ,
                //返回处理
                //第二个是固定状态码的,当然你也可以不写
                function(data,z){
                    $('#get').text("返回的数据\n\r"+data+"状态码\n\r"+z);
                })
            //获取ID = submit,input里的内容
            

        });
    });
</script>

再创建个”1.php”(代码如下)

<?php 
	echo $_GET['t1']."文本1";
	echo $_GET['t2']."文本2";
?>

代码分析

格式( $.get(“请求地址?”+变量,返回方法))

代码和POST差不多分析去看post

post()

演示代码

先创建一个PHP代码。名字随意(代码如下) (访问到)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery|Ajax教程-微渺WeiMiao</title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="mx-auto bg-warning" style="width:700px;text-align:center;padding:30px;">

        文本1<input type="text" id = "text1"><br />
        文本2<input type="text" id = "text2"><br />
        <a id = "submit">提交数据</a>
        <div id = "get"></div>
    </div>
</body>
</html>

<!--教程核心代码-->
<script>
    $(function (){
  		//监听ID等于submit,当按下时触发
        $('#submit').click(function(){
            $.post(
                //提交的地址
                "1.php",
                //提交的内容
                {

                    t1:$('#text1').val(),
                    t2:$('#text2').val()
                },   
                //返回处理
                //第二个是固定的状态码的,当然你也可以不写
                function(data,z){
                    $('#get').text("返回的数据\n\r"+data+"状态码\n\r"+z);
                })
            //获取ID = submit,input里的内容
            

        });
    });
</script>

再创建一个名字为“1.php”(代码如下)

<?php 
        /*获取 post中的t1,并输出*/
	echo $_POST['t1']."文本1";
        /*获取 post中的t2,并输出*/
	echo $_POST['t2']."文本2";
?>

当我们再“input”里输入,点击“提交数据”时就会获取ID等于text1和text2,异步发送到1.php里,如果对“val()”有疑问的请前往
https://weimiao.xin/archives/2280#i-9
查看
再由1.php接受消息,使用echo输出。(注意:返回内容是返回整个网页的代码!即使不是由PHP输出的是普通的HTML代码)

代码分析

看代码注释

$(function (){
  	//监听ID等于submit,当按下时触发
        $('#submit').click(function(){
            $.post(
                //提交的地址
                "1.php",
                //提交的内容
                {
                    t1:$('#text1').val(),
                    t2:$('#text2').val()
                },   
                //返回处理
                //第二个是固定的状态码的,当然你也可以不写
                function(data,z){
                    //定位到id = get修改文本
                    $('#get').text("返回的数据\n\r"+data+"状态码\n\r"+z);
                })
            //获取ID = submit,input里的内容
        });
    });
</script>

灰色对应的POST提交的名称!

格式( $.post(“请求地址”+变量+返回方法))

代码下载

本文为原创,转载请注明本网址

0 评论
留言