php ajax 二维数组,Ajax传递二维数组到ThinkPHP控制器

本文介绍了如何使用jQuery动态生成checkbox以显示专家的擅长领域,并通过Ajax实现数据验证、多选框值的数组处理,最终将JSON化的专业能力数组保存到前后端数据库的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

介绍:录入专家信息,其中有Checkbox多选框,用于选择专家的擅长领域。专家的信息与对应的专业能力分别存储两张表。具体情况如下图

首先是界面:这个checkbox是由jQuery自动生成的,依据专业能力基础数据表生成。

生成checkbox的代码:

$(document).ready(function(){

$.ajax({

type:"POST",

url:"http://localhost/yibu/index.php/Home/Expertadd/expertecho",

success:function(result){

var data = $.parseJSON(result);

var len =data.length;

var listHtml="";

for (var i = 0; i < len; i++) {

listHtml+="/>"+data[i]["major"]+"";

}

listHtml ="

"+listHtml+"";

$("#myTable").append(listHtml)

}

})

})

24aeeb7091296bc5d5630b14964bd259.png

写入数据之前先做文本框和多选框的文本判断,包括各式,选择状态,必填字段等。这里贴一下判断多选框的代码

var boolMajor = cheMajor.is(":checked")//checkbox状态判断遍历checkbox并赋值到数组

var dataMajor = new Array();for (var i = 0; i < cheMajor.length; i++) {//遍历checkbox

if(cheMajor[i].checked){

dataMajor.push({"majorid":cheMajor[i].value,"major":cheMajor[i].id});//专业能力数组赋值

}

}

每次循环用push推入的都是一维数组,最后dataMajor会成为二维数组,接下来要对二维数组进行JSON序列化

var jsonMajor = JSON.stringify(dataMajor);//专业能力数组用JSON序列化

接下来传递数据到控制器

$.ajax({//调用Ajax

type:"POST",

url:"",

data:{"dataExpert":dataExpert,"jsonMajor":jsonMajor},//传递数据到控制器

success:function(result){

if(result=="success"){

var appendDiv="

专家信息写入成功!";

$("#clearfix").after(appendDiv);

}

}

})

后端ThinkPHP对数组进行处理

$major=D("major");//定位数据表$jsonMajor=$_POST["jsonMajor"];//接收JSON序列$arrMajor = json_decode($jsonMajor,true);//专业能力数组反序列化for($i=0;$i$arrMajor[$i]["expertid"]=$resultExpert;//专业能力数组加入对应专家ID

}$resultMajor = $major->addall($arrMajor);if($resultExpert>0 && $resultMajor>0){//两张表均写入成功输入信息给前端

echo "success";

}

至此,这个二维数组从生成到保存到数据库就结束了。

ThinkPHP5(TP5)是一款基于PHP的开源Web应用框架,用于简化PHP Web开发。在TP5中,使用Ajax从后端传递数据到前端非常常见,尤其是在实现动态交互和无需刷新页面的场景下。 以下是一个基本的步骤来实现这个功能: 1. **创建后端控制器**(例如`Home.php`): 在控制器中,你可以有一个方法处理AJAX请求,例如`indexAction`: ```php namespace Home\Controller; use ThinkController; class IndexController extends Controller { public function indexAction(){ $data = array( 'item1' => '这是第一个元素', 'item2' => '这是第二个元素', // ... 其他数据项 ); // 使用json_encode将数组转化为JSON格式 echo json_encode($data); } } ``` 2. **设置路由**: 确保已经配置了对应的方法路由,让前端能够通过URL访问该方法。 3. **前端使用Ajax**: 使用JavaScript(如jQuery)发送GET或POST请求到指定的URL,并处理返回的JSON数据。这里是一个基本的例子: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $.ajax({ url: '/home/index/index', // 替换为你的TP5应用的实际URL type: 'get', dataType: 'json', success: function(data) { // 将接收到的JSON转换回JavaScript对象 var jsonData = JSON.parse(data); // 在前端显示数据 for(let key in jsonData){ console.log(key + ': ' + jsonData[key]); } }, error: function(jqXHR, textStatus, errorThrown) { console.log('请求失败:' + textStatus); } }); }); </script> ``` 4. **相关问题--** - 怎么在ThinkPHP5中处理更复杂的AJAX请求,比如需要登录验证? - TP5如何设置跨域来允许前端发送Ajax请求? - AJAX请求失败时,如何优雅地展示错误信息给用户?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值