ThinkPHP Ajax for JQuery

ThinkPHP与Ajax交互示例

最新推荐文章于 2021-12-17 11:08:32 发布

不净之心

最新推荐文章于 2021-12-17 11:08:32 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

分类专栏： PHP 文章标签： javascript php ViewUI

本文链接：https://blog.youkuaiyun.com/pyzheng/article/details/84016419

PHP 专栏收录该内容

77 篇文章

订阅专栏

本文介绍了一个使用ThinkPHP框架结合Ajax实现客户端与服务器端数据交互的例子。具体包括了HTML页面、JavaScript脚本和PHP后台处理代码。通过示例展示了如何发送Ajax请求并接收服务器响应。

ThinkPHP Ajax for JQuery
A:
-------------------------------
1. html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>留言板</title>
	<load href="__PUBLIC__/css/site.css"/>
	<load href="__PUBLIC__/js/jquery-1.3.2.js"/>
	<load href="__PUBLIC__/js/jquery.form.js"/>
	<load href="__PUBLIC__/js/ajaxText.js"/>
</head>
<body>
	<div>
		<form id="myForm" action="" method="post">
			<p>
				Title:<input type="text" name="title" id="title" maxlength="20" value="%a%">
			</p>
			<p>
				<input type="button" name="submit" value="Call Ajax" onclick="callAjax('__URL__/checkName')">
			</p>
		</form>
	</div>
	<div id="fromServerdiv"></div>
</body>
</html>

ajaxText.js:
-----------------------------------

callAjax = function(url){
/*    
   $.post(url, { 'username': $('#username').val() }, function(obj,status){
        alert(obj.data);
		alert(obj.info);
		alert(status);
		$("#fromServerdiv").html(obj.info);
    }, 'json');

    或者*/
    $.ajax({
		 type: "POST",
		 url: url,
		 data:   "name=John&location=Boston",
		 dataType: 'json',
		 success: function(obj){
		 	 alert( "Data Saved: " + obj.data ); 
			 alert( "Data Saved: " + obj.info );
	     } 

	})
}

AjaxAction.class.php
--------------------

public function checkName(){
        header("Content-type:text/html; charset=utf-8");
    	$this->ajaxReturn("abc","测试数据A",'用户名正确~',0);
    }

B:
HTML
---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>留言板</title>
	<load href="__PUBLIC__/css/site.css"/>
	<load href="__PUBLIC__/js/jquery-1.3.2.js"/>
	<load href="__PUBLIC__/js/jquery.form.js"/>
	<load href="__PUBLIC__/js/ajaxText.js"/>
</head>
<body>
	<div>
		<form id="myForm" action="__URL__/fromAjaxServer" method="post">
			<p>
				Title:<input type="text" name="title" id="title" maxlength="20" value="%a%">
			</p>
			<p>
				<input type="submit" name="submit" value="Submit Ajax">
			</p>
		</form>
	</div>
	<div id="fromServerdiv"></div>
</body>
</html>

JS:
-----------------------

checkForm = function(){
    alert("checkForm");
}
complete = function(obj,status){
    alert(obj.data);
	alert(obj.info);
	alert(status);
	$("#fromServerdiv").html(obj.info);
}

$(document).ready(function(){
	$('#myForm').ajaxForm({
        beforeSubmit: checkForm, // pre-submit callback
        success: complete, // post-submit callback
        dataType: 'json'
    });
})

Action:
--------------------

public function fromAjaxServer(){
    	header("Content-type:text/html; charset=utf-8");
    	$this->ajaxReturn("abc","测试数据B",'用户名正确~',0);
    }