如何使用JQuery AJAX和CodeIgniter将JSON插入MySQL?

Question

我正在使用Jquery Form Wizard/Form-Repeater，无法使用CodeIgniter将多个表单的值插入到数据库中。怎么做？

假设，我的数据库"table_data"如下：

| req_id  |  req_custname  | req_type | req_data | req_comment |

CI 视图：表单向导和表单中继器：

<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-12 grid-margin">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Request</h4>
<form id="req-form" action="" method="post">
<div>
<h3>Type</h3>
<section>
<h3>Type</h3>
<div class="form-group">
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label name="errorl" id="error_req_type"></label>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="req_type" id="req_type" value="Urgent">URGENT
Urgent
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="req_type" id="req_type" value="Normal">NORMAL
Normal
</label>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
<h3>Customer Information</h3>
<section>
<h3>Customer Information</h3>
<div class="form-group">
<label>Customer's Name:</label>
<input name="req_custname" id="req_custname" type="text" class="form-control required" style="text-transform:uppercase" placeholder="Enter customer's name" value="" autofocus >
</div>
</section>
<h3>Details</h3>
<section>
<h3>BW Upgrade Details</h3>
<div class="form-group">
<label>Data:</label>
<div class="row">
<div class="col-lg-12">
<div class="card-body">
<form class="form-inline repeater">
<div data-repeater-list="group-a">
<div data-repeater-item class="d-flex mb-2">
<div class="input-group mr-sm-2 mb-sm-0">
<input type="text" name="fruit" class="form-control" id="inlineFormInputGroup1">
</div>  
<div class="input-group mr-sm-2 mb-sm-0">
<input type="text" name="order" class="form-control" id="inlineFormInputGroup1">
</div>
<button data-repeater-delete type="button" class="btn btn-danger btn-sm icon-btn ml-2" >
<i class="mdi mdi-delete"></i>
</button>
</div>
</div>
<button data-repeater-create type="button" class="btn btn-info btn-sm icon-btn ml-2 mb-2">
<i class="mdi mdi-plus"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<h3>Submit</h3>
<section>
<h3>Comments</h3>
<div class="form-group">
<label>Requestor's Comments</label>
<textarea type="text" class="form-control" rows="3" name="req_recomment" autofocus> </textarea>
</div>
</section>
</div>
</form>
</div>
</div>
</div>
</div>        
</div>

Ajax 发布到 CI：

var req_custname = $("input[name='req_custname']").val();
var req_type = $("input[name='req_type']:checked").val();
var req_recomment = $("textarea[name='req_recomment']").val();
var repeatval = $('.repeater').repeaterVal();
if(req_custname && req_type && req_recomment && repeatval)
{
$.ajax({
type: "POST",
url: BASE_URL+"/req/add",
dataType: "json",
data: 
{
req_custname:req_custname,
req_type:req_type,
req_recomment:req_recomment,
repeatval:repeatval
},
});
};
CI Controller (Req_.php):
public function add()
{        
$post = $this->input->post(null, TRUE);
$id = $this->req_m->add($post);
if ($this->db->affected_rows() > 0 ) {
$this->db->from('table_data');
$this->db->where('req_id', $id);
$result = $this->db->get()->result();
}  
}

CI 模型 (Req_m.php(：

public function add($post)
{        
$params['req_custname'] = $post['req_custname'];
$params['req_type'] = $post['req_type'];
$params['req_comment'] = $post['req_comment'];
$params['req_data'] = $post['req_data'];
if ($this->db->table_exists('table_data') ) {
$this->db->insert('table_data', $params);
}
}

如果我尝试在没有 ajax 的情况下发布表单中继器值，上面的代码可以插入到数据库中

我想要的是将 JSON 从表单中继器插入到"req_data"中。 数据库中的预期结果应如下所示：

| req_id  |  req_custname  | req_type | req_data | req_comment | 
|   1     |  John          | Manual   | {“0”: {“fruit”: “apple”, “order”: “22”}, “1”: {“fruit”: “orange”, “order”: “4”} } | No comment | 
|   2     |  Mary          | Urgent   | {“0”: {“fruit”: “banana”, “order”: “6”} } | KIV | 

Answer 1

您的 json 未在 POST 函数中正确声明。

尝试更改：

if(req_custname && req_type && req_recomment && repeatval)
{
$.ajax({
type: "POST",
url: BASE_URL+"/req/add",
dataType: "json",
data: 
{
req_custname:req_custname,
req_type:req_type,
req_recomment:req_recomment,
repeatval:repeatval
},
});
};

自：

if(req_custname && req_type && req_recomment && repeatval)
{
var postData = { "req_custname":req_custname,
"req_type":req_type,
"req_comment":req_recomment,
"req_data":repeatval };
var json = JSON.stringify(postData);
$.ajax({
type: "POST",
url: BASE_URL+"/req/add",
dataType: "json",
data: json,
});
};

有关 json 字符串创建的工作 PoC，请参阅 https://codepen.io/verdant-spark/pen/mdyyoXG。