Ajax传递二维数组到ThinkPHP控制器
2015-11-10 14:15
549 查看
介绍:录入专家信息,其中有Checkbox多选框,用于选择专家的擅长领域。专家的信息与对应的专业能力分别存储两张表。具体情况如下图
首先是界面:这个checkbox是由jQuery自动生成的,依据专业能力基础数据表生成。
生成checkbox的代码:
$(document).ready(function(){
<span style="white-space:pre"> </span>$.ajax({
<span style="white-space:pre"> </span>type:"POST",
<span style="white-space:pre"> </span>url:"http://localhost/yibu/index.php/Home/Expertadd/expertecho",
<span style="white-space:pre"> </span>success:function(result){
<span style="white-space:pre"> </span>var data = $.parseJSON(result);
<span style="white-space:pre"> </span>var len =data.length;
<span style="white-space:pre"> </span>var listHtml="";
<span style="white-space:pre"> </span>for (var i = 0; i < len; i++) {
<span style="white-space:pre"> </span>listHtml+="<input type='checkbox' id='"+data[i]["major"]+"' name='major' value='"+data[i]["id"]+"'<span style="white-space:pre"> </span>/>"+data[i]["major"]+"";
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>listHtml ="<tr><td colspan='2'><div class='divcheck'>"+listHtml+"</div></td></tr>";
<span style="white-space:pre"> </span>$('#myTable').append(listHtml)
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>})
})
写入数据之前先做文本框和多选框的文本判断,包括各式,选择状态,必填字段等。这里贴一下判断多选框的代码
每次循环用push推入的都是一维数组,最后dataMajor会成为二维数组,接下来要对二维数组进行JSON序列化
接下来传递数据到控制器
$.ajax({//调用Ajax
<span style="white-space:pre"> </span>type:"POST",
<span style="white-space:pre"> </span>url:"<{:U('Expertadd/add')}>",
<span style="white-space:pre"> </span>data:{'dataExpert':dataExpert,'jsonMajor':jsonMajor},//传递数据到控制器
<span style="white-space:pre"> </span>success:function(result){
<span style="white-space:pre"> </span>if(result=="success"){
<span style="white-space:pre"> </span>var appendDiv='<div id="appendDiv" class="alert green_alert"><p>专家信息写入成功!</p></div>';
<span style="white-space:pre"> </span>$("#clearfix").after(appendDiv);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
})
后端ThinkPHP对数组进行处理
至此,这个二维数组从生成到保存到数据库就结束了。
首先是界面:这个checkbox是由jQuery自动生成的,依据专业能力基础数据表生成。
生成checkbox的代码:
$(document).ready(function(){
<span style="white-space:pre"> </span>$.ajax({
<span style="white-space:pre"> </span>type:"POST",
<span style="white-space:pre"> </span>url:"http://localhost/yibu/index.php/Home/Expertadd/expertecho",
<span style="white-space:pre"> </span>success:function(result){
<span style="white-space:pre"> </span>var data = $.parseJSON(result);
<span style="white-space:pre"> </span>var len =data.length;
<span style="white-space:pre"> </span>var listHtml="";
<span style="white-space:pre"> </span>for (var i = 0; i < len; i++) {
<span style="white-space:pre"> </span>listHtml+="<input type='checkbox' id='"+data[i]["major"]+"' name='major' value='"+data[i]["id"]+"'<span style="white-space:pre"> </span>/>"+data[i]["major"]+"";
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>listHtml ="<tr><td colspan='2'><div class='divcheck'>"+listHtml+"</div></td></tr>";
<span style="white-space:pre"> </span>$('#myTable').append(listHtml)
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>})
})
写入数据之前先做文本框和多选框的文本判断,包括各式,选择状态,必填字段等。这里贴一下判断多选框的代码
var boolMajor = cheMajor.is(':checked')//checkbox状态判断遍历checkbox并赋值到数组
var dataMajor = new Array();
for (var i = 0; i < cheMajor.length; i++) {//遍历checkbox <span style="white-space:pre"> </span>if(cheMajor[i].checked){ <span style="white-space:pre"> </span>dataMajor.push({"majorid":cheMajor[i].value,"major":cheMajor[i].id});//专业能力数组赋值 } }
每次循环用push推入的都是一维数组,最后dataMajor会成为二维数组,接下来要对二维数组进行JSON序列化
var jsonMajor = JSON.stringify(dataMajor);//专业能力数组用JSON序列化
接下来传递数据到控制器
$.ajax({//调用Ajax
<span style="white-space:pre"> </span>type:"POST",
<span style="white-space:pre"> </span>url:"<{:U('Expertadd/add')}>",
<span style="white-space:pre"> </span>data:{'dataExpert':dataExpert,'jsonMajor':jsonMajor},//传递数据到控制器
<span style="white-space:pre"> </span>success:function(result){
<span style="white-space:pre"> </span>if(result=="success"){
<span style="white-space:pre"> </span>var appendDiv='<div id="appendDiv" class="alert green_alert"><p>专家信息写入成功!</p></div>';
<span style="white-space:pre"> </span>$("#clearfix").after(appendDiv);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
})
后端ThinkPHP对数组进行处理
$major=D("major");//定位数据表
$jsonMajor=$_POST["jsonMajor"];//接收JSON序列
$arrMajor = json_decode($jsonMajor,true);//专业能力数组反序列化
for($i=0;$i<$len;$i++){ <span style="white-space:pre"> </span>$arrMajor[$i]["expertid"]=$resultExpert;//专业能力数组加入对应专家ID }
$resultMajor = $major->addall($arrMajor);
if($resultExpert>0 && $resultMajor>0){//两张表均写入成功输入信息给前端 <span style="white-space:pre"> </span>echo "success"; }
至此,这个二维数组从生成到保存到数据库就结束了。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- kindeditor 批量上传 上传失败 thinkphp swfupload session
- JavaScript 各种遍历方式详解
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 再谈Jquery Ajax方法传递到action(补充)
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法