1、在提交表单的HTML页面的<head>中定义一个变量供Jquery使用

<script type='text/javascript'>
var handleUrl='<{:U("Index/Index/handle","","")}>';
</script>
创 建一个handleUrl变量供index.js（这个是引入的Jquery文件）使用；因为引用的js文件中无法使用模版语法<{}>来得 到提交数据的地址，所以就在这里定义一个变量来获取js需要提交给PHP处理数据的方法的地址；注意U方法中必须写入完整的"应用名/控制器名/方法名" 这样的路径，后面两个参数为空表示伪静态后缀为空，这样得到的地址才是正确的

2、在引入的js文件中使用$.post()进行AJAX异步处理

//点击按钮提交
$('#send-btn').click(function () {
//判断用户名，内容是否为空
var username=$('input[name=username]');
var content=$('textarea[name=content]');
if (username.val()=='') {
alert('用户名不能为空');
username.focus();
return;    //return的作用是跳出本函数
}
if (content.val()=='') {
alert('内容不能为空');
content.focus();
return;
}
        //AJAX异步发布，使用$.post()；第一个参数是PHP端接收处理这个异步发布的内容的方法；第二个参数是发送过去的数据，使用json格式； 第三个参数是回调函数，用于处理PHP返回的数据；第四个参数指定接收PHP返回数据的格式，通常用json格式
$.post(handleUrl,{"username":username.val(),"content":content.val()},function (data) {  //data是PHP返回的数组名
if (data.status) {  //这里开始处理PHP返回的数据；通过PHP返回的data数组中的status来判断PHP端操作是否成功
var str='<dl class="paper a1">';
str+='<dt><span class="username">'+data.username+'</span>';
str+='<span class="num">No.'+data.id+'</span>';
str+='</dt><dd class="content">'+data.content+'</dd>';
str+='<dd class="bottom">';
str+='<span class="time">'+data.time+'</span>';
str+='<a href="" class="close"></a></dd></dl>';
$("#main").append(str);
$("#close").click();
}else {
alert("发布失败");
}
},'json')
}

3、PHP中处理Jquery通过ajax发送过来的数据

//异步发布处理
public function handle(){    //这个方法就是handleUrl='<{:U("Index/Index/handle","","")}>';
if(!IS_AJAX){ //判断是否通过ajax异步处理，防止直接在浏览器输入路径访问
halt('页面不存在'); //halt()输出错误页面，配置文件中配置了错误页面路径；也可以使用_404()
}
//开始对Jquery发送过来的数据进行处理
            // Jquery是使用$.post异步提交的，所以用$_POST接收Jquery发送过来的数据
$data=array("username"=>$_POST['username'],"content"=>htmlspecialchars($_POST['content']),"time"=>time()); //注意这里使用htmlspecialchars()对内容进行过滤，防止js的运行
if($id=M('wish')->data($data)->add()){ //插入数据成功则取出数据返回给页面
$data['id']=$id;
$data['content']=replace_phiz($data['content']); //调用自定义函数将发布内容中的表情替换为可用的字符串形式
$data['time']=date('Y-m-d H:i',$data['time']); //将发布日期替换为格式化后的日期
$data['status']=1; //返回一个状态码1来表示插入数据库成功；Jquery端将用这个来判断这边的操作是否成功
$this->ajaxReturn($data,'json');//调用TP的ajaxReturn()返回数据；第一个参数是一个数组；第二个参数指定返回数据的形式，通常使用json格式，会自动将那个数组转化为json格式
}else{
$this->ajaxReturn(array('status'=>0),'json'); //插入数据库失败则返回状态0
}
}

注：form表单中的action不用写提交后台的地址，留空就行，因为数据都是通过Jquery发送的，甚至不用form表单也行，只要有input输入数据，Jquery就能通过input的name值获取数据。

Thinkphp，Jquery，Ajax异步发布的更多相关文章

  1. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  2. Jquery Ajax 异步设置Table中某列的值

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

  3. 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

  4. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  5. jQuery Ajax(异步请求)

    jQuery异步请求 原始的异步请求是需要创建的 XMLHttpRequest 对象.(IE5,6不支持)目前很多浏览器都支持XMLHttpRequest对象 jQuery ajax常用的回调函数:b ...

  6. jquery ajax异步调用

    写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...

  7. jquery.ajax异步发送请求的简单测试

    使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...

  8. Jquery ajax异步传值的两个实用的方法，你看后肯定会用第二个

    故名思议,你是个asp.net  或者是搞PHP的或者 是javaweb的 ,但是为了提高界面的效率,你必须会实用jquery的ajax,当然,在ajax异步传值的时候很头疼的一件事情就是,拼接字符串 ...

  9. JQuery $.ajax(); 异步访问完整参数

    $.ajax 完整参数   jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post ...

随机推荐

  1. java 一些容易忽视的小点-控制语句

    随机数 .Math.random()该方法用于产生一个0到1区间的double类型的随机数,但是不包括1 if-else循环语句 如果if语句不写{},则只能作用于后面的第一条语句 switch语句 ...

  2. 阿里十年架构经验总结的Java学习体系

    Java学习这一部分其实是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈每个 ...

  3. maven配置checkstyle插件对代码规范进行静态检查

    checkstyle配置的官方网站:http://checkstyle.sourceforge.net/config.html (1)新建maven项目,配置checkstyle插件 pom.xml ...

  4. 3.1 Makefile

    安装make 安装make sudo apt-get install make make -v

  5. Android开发 ---Activity的7种运行状态

     Android开发 ---Activity的7种运行状态 创建 --> 启动 --> 运行 -->  暂停 --> 停止 --> 销毁 重启 操作图解: 1.MainA ...

  6. java中String的equals（）和 ==

    String a=new String("java"); String b=new String("java"); System.out.println(a.e ...

  7. L293 给地球降温

    Countries look at ways to tinker with Earth’s thermostat The idea of cooling the climate with strato ...

  8. L259 合同

    We are satisfied with the terms of this contract for the most part, but we feel that your terms of p ...

  9. sql order by 结合case when then

    SELECT * FROM datav.a_current_per_entry_01 WHERE intime = (SELECT MAX(intime) FROM a_current_per_ent ...

  10. Bug01_MyBatis_不允许有匹配 "[xX][mM][lL]" 的处理指令目标。

    xml 文件格式不正确.一般是开头约束不对. 我出现的问题是:<?xml version="1.0" encoding="UTF-8"?>写了两遍, ...