Thinkphp学习日记:jQuery_ajax数据提交

简介: <p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> 最近在玩Thinkphp,废话不多说,说正事.</p> <p style="margin:10px auto; paddin

最近在玩Thinkphp,废话不多说,说正事.

客户端js提交代码

1 $.post('http://localhost/app/index.php/Index/Index/handle',{username : document.getElementById('username').value,content : document.getElementById('content').value,},function (data){console.log(data);alert('ok');});

主要是提交两个表单项的内容到handle,如果成功返回就执行function函数弹出一个ok

ps:这段代码不是标准的jQuery的写法,标准的应该是

$( 'input[name=username]' ).val()

$( '#username' ).val()

 

服务器端脚本

复制代码
 1     public function handle(){
 2         if (!isAJAX) {
 3             halt('请求有误');
 4              
 5          } //else
 6          // //echo '请求成功';
 7       //   // var_dump(I('post.'));
 8         $wi=M('wish');
 9         $data['wi_name']=I('username');
10         $data['wi_content']=I('content');
11         $data['wi_time']=time(); 
12         $result=$wi->data($data)->add(); 
13         // var_dump($result);
14         if ($result) {
15             // $this->success('插入成功');
16             // $this->ajaxReturn('110','插入成功',1);
17             $dataReturn['status']=1;
18             $dataReturn['info']='the post is ok';
19             $this->ajaxReturn($dataReturn,'json');
20         }else{
21             halt('插入失败');
22         }
23 
24     }
复制代码

但是数据提交成功,一直没有弹窗,也就是回调函数一直没有执行.找了半天,以为是json格式有问题,才知道是我注释的那段代码

  //else
    // //echo '请求成功';
     //   // var_dump(I('post.'));

本来是为了更友好的提示,估计是把这个当成了返回值,然后因为客户端解析出问题,所以没有反应,把它注释掉就行了。
ps:今天又研究了下,发现应该是Thinkphp将echo的内容返回给了前端,而因为echo的内容不符合jQuery的格式,所以不能正常解析
所以我把echo的内容换成 echo "{ info : '1213', name : '4442'}";
然后,页面终于有反应了,用console.log(data),打印后内容是{ info : '1213', name : '4442'},不过不能识别是json格式

好吧,又发现新原因了,不是之前想的,如果后台用echo或者其他输出的话,Thinkphp会将它传到前台,当做这个Ajax请求的返回值,But如果你在后来再来一个$this->ajaxReturn($dataReturn,'json');,就会出错,不执行
相关文章
|
27天前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
40 3
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
18 0
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
59 0
|
2月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
102 0
|
7月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
3月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
233 2
|
4月前
|
JSON JavaScript 数据格式
Jquery 将 JSON 列表的 某个属性值,添加到数组中,并判断一个值,在不在数据中
Jquery 将 JSON 列表的 某个属性值,添加到数组中,并判断一个值,在不在数据中
84 0
|
6月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
47 0
|
6月前
|
前端开发 JavaScript Java
Spring创建Ajax和接受Ajax数据-spring20
Spring创建Ajax和接受Ajax数据-spring20