zoukankan      html  css  js  c++  java
  • Thinkphp,Jquery,Ajax异步发布

    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值获取数据。

  • 相关阅读:
    《动手学深度学习》系列笔记—— 1.3 多层感知机
    angular 9.1.0发布,下一个版本:angular10
    postgresql 两行数据时间之差
    abp zero bug
    docker nginx angular 刷新错误,404错误
    EF Core 新特性——Owned Entity Types
    identityServer4 中的概念(Scope,claim)
    程序员工作时间简单分析
    吐槽下阿里云栖大会购票系统
    打造适合你的ABP(1)---- 完善日志系统
  • 原文地址:https://www.cnblogs.com/3body/p/5416265.html
Copyright © 2011-2022 走看看