带有Codeigniter验证的Ajax表单
[英]Ajax form with codeigniter validation
问题描述
我正在尝试在Codeigniter中进行Ajax表单验证。
表单和ajax都在视图/产品/附加产品中 ，
<script type="text/javascript">
$(document).ready(function(){
$("#submitProducts").click(function(e){
e.preventDefault();
var dataString = $("#add-products-bulk-form").serialize();
var url="products/addproducts";
$.ajax({
type:"post",
url:"<?php echo base_url() ?>"+url,
dataType: 'json',
data:dataString,
success:function (res) {
res=$.parseJSON(res);
if($.isEmptyObject(res.error)){
alert(res.success);
}else{
console.log("hasn't run form yet");
}
},
})
})
});
</script>
这是我的产品控制器：
public function addproducts()
{
$data['title'] = "Add Products";
$this->load->view('templates/header', $data);
$this->load->view('products/addproducts');
$this->load->view('templates/footer');
//form rules
//$this->form_validation->set_rules('name[]', 'Product Name', 'required');
$this->form_validation->set_rules('partnumber[]', 'Part number', 'required|is_unique[items.itemSKU]');
//$this->form_validation->set_rules('msrp[]', 'MSRP', 'required');
if ($this->form_validation->run() === FALSE)
{
echo "did not pass validation";
$errors = validation_errors();
echo json_encode(['error'=>$errors]);
}
else
{
echo "did pass validation";
$this->product_model->add_products();
echo json_encode(['success'=>'Record added successfully.']);
}
}
如果我保持上面的代码，单击提交按钮时没有任何反应。 但是，如果我摆脱了dataType：'json'行 ，我会得到错误
VM1679:1 Uncaught SyntaxError: Unexpected token d in JSON at position 0
at Function.parse [as parseJSON] (<anonymous>)
at Object.success (addproducts:140)
at i (jquery-3.1.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2)
at A (jquery-3.1.1.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4)
如果我放弃了dataType：'json'和res = $。parseJSON（res） ，当我输入重复的产品并单击Submit和console.log（res）时，我在控制台中得到以下内容，它确实返回了整个页面addproducts的资源和源代码。
did not pass validation{"error":"<p>The Part number field must contain a unique value.<\/p>\n"}<!DOCTYPE html>
<html lang="en">
<head>
我没有在此处粘贴整个源代码。 并且res.success将发出未定义的警报。
我被困了好几天，请帮忙。 如果需要，我将提供更多详细信息。 谢谢！
2 个解决方案
解决方案1
0 已采纳 2018-07-09 22:21:38
为了整理我之前的评论...
public function addproducts()
{
//form rules
//$this->form_validation->set_rules('name[]', 'Product Name', 'required');
$this->form_validation->set_rules('partnumber[]', 'Part number', 'required|is_unique[items.itemSKU]');
//$this->form_validation->set_rules('msrp[]', 'MSRP', 'required');
header('Content-Type: application/json');
if ($this->form_validation->run() === FALSE)
{
$this->output->set_status_header(400);
$errors = validation_errors();
echo json_encode(['error'=>$errors]);
}
else
{
$this->output->set_status_header(200);
$this->product_model->add_products();
echo json_encode(['success'=>'Record added successfully.']);
}
}
现在您可以使用成功回调侦听成功响应，使用错误回调侦听错误响应...
<script type="text/javascript">
$(document).ready(function(){
$("#submitProducts").click(function(e){
e.preventDefault();
var dataString = $("#add-products-bulk-form").serialize();
var url="products/addproducts";
$.ajax({
type:"post",
url:"<?php echo base_url() ?>"+url,
dataType: 'json',
data:dataString,
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseJSON.error);
},
success: function (data, textStatus, jqXHR) {
alert(jqXHR.responseJSON.success);
}
});
});
});
</script>
解决方案2
0 2018-07-09 22:37:05
我意识到我使用相同的控制器函数进行ajax调用，将addproducts函数分为以下两个函数，并使用ajax调用ajax_add_products函数。 现在有效。
public function addproducts()
{
$data['title'] = "Add Products";
$this->load->view('templates/header', $data);
$this->load->view('products/addproducts');
$this->load->view('templates/footer');
}
public function ajax_add_products(){
//form rules
//$this->form_validation->set_rules('name[]', 'Product Name', 'required');
$this->form_validation->set_rules('partnumber[]', 'Part number', 'required|is_unique[items.itemSKU]');
//$this->form_validation->set_rules('msrp[]', 'MSRP', 'required');
if ($this->form_validation->run() === FALSE)
{
$errors = validation_errors();
echo json_encode(['error'=>$errors]);
}
else
{
$this->product_model->add_products();
echo json_encode(['success'=>'Record added successfully.']);
}
}
使用ajax在codeigniter中进行表单验证
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.