jquery学习之一Ajax的应用-优快云博客

本文介绍如何利用AppServ快速部署Web环境，并通过jQuery的load方法及GET请求实现HTML页面元素的动态加载和JSON数据的获取。涵盖AppServ安装、jQuery基本用法及PHP后端交互。

安装环境：安装AppServ，这玩意真好用，其集成了Apache、Apache Monitor、PHP、MySQL、PHP-Nuk、phpMy Admin。

确实非常好用，之前知道啊，还在用nodejs自己集成的后台，个人感觉和PHP比起来nodejs自己搭后台好难用啊。

1.安装AppServ，太好用。

2.有Load()方法 $get()方法 $post()方法

2.1 使用Load()方法中可以载入xxx.html

载入的HTML，命名test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="comment">
    <h6>张三：</h6>
    <p class="para">沙发.</p>
</div>
<div class="comment">
    <h6>李四：</h6>
    <p class="para">板凳.</p>
</div>
<div class="comment">
    <h6>王五：</h6>
    <p class="para">地板.</p>
</div>
</body>
</html>

原始的HTML，命名demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
    <input type="button" id="send" value="Ajax获取" />
    <div class="comment">已有评论：</div>
    <div id="resText"></div>

<script>
$(function(){
    $("#send").click(function(){
        $("#resText").load("test.html");
    });
});
</script>
</body>
</html>

2.2 $get()方法回调函数调用HTML数据格式

文本 demo2.html 回调函数调用HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
    <form id="form1" action="#">
        <h1>评论</h1>
        <p>姓名：<input type="text" name="username" id="username" /></p>
        <p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
        <p><input type="button" id="send" value="提交" /></P>
    </form>
    <div class="comment">已有评论：</div>
        <div id="resText"></div>
    </div>

<script>
$(function(){
    $("#send").click(function(){
        $.get("get1.php",{
            username: $("#username").val(),
            content: $("#content").val()
        },function(data,textStatus){
            $("#resText").html(data);
        });
    });
});
</script>
</body>
</html>

文件 get1.php

<?php 
	header("Content-Type:text/html; charset=utf-8");
	echo "
	<div class='comment'>
	<h6>{$_REQUEST['username']}:</h6>
	<p class='para'>{$_REQUEST['content']}</p>
	</div>
	";
?>

2.3 $get()方法回调函数调用JSON文件数据格式

文本 demo3.html 回调函数调用JSON文件数据格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
    <form id="form1" action="#">
        <h1>评论</h1>
        <p>姓名：<input type="text" name="username" id="username" /></p>
        <p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
        <p><input type="button" id="send" value="提交" /></P>
    </form>
    <!--生成的区域-->
    <div class="comment">已有评论：</div>
        <div id="resText"></div>
    </div>

<script>
$(function(){
    $("#send").click(function(){
        $.get("get3.php",{
            username: $("#username").val(),
            content: $("#content").val()
        },
        function(data,textStatus){
            var username = data.username;
            var content = data.content;
            var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
            $("#resText").html(txtHtml);
        },"json");
    })
})
</script>
</body>
</html>

文件get3.php

<?php 
	header("Content-Type:text/html; charset=utf-8");
	echo 
	"{ 
		\"username\" : \"{$_REQUEST['username']}\" , 
		\"content\" : \"{$_REQUEST['content']}\"
	}" 
?>

post方法和get方法只是改变函数。