使用 AJAX 和带有 Codeigniter 的 jquery 将表单数据传递给控制器答案

【问题标题】：Passing form data to controller using AJAX and jquery with Codeigniter使用 AJAX 和带有 Codeigniter 的 jquery 将表单数据传递给控制器
【发布时间】：2014-01-27 01:33:34
【问题描述】：

我正在尝试将此表单中的数据发布到数据库中。我尝试了一些教程但没有成功。这是我的代码。有什么想法吗？

查看：

<form method="post" name="myForm1" id="myForm1" enctype="multipart/form-data" >
Email: <input type="text" name="email" id="email">
Question: <input type="text" name="qText" id="qText">
<input id="submitbutton" type="submit">
</form>

AJAX（在视图中，在表单的正下方）

<script type='text/javascript' language='javascript'>

$("#submitbutton").click(function(){


$.ajax({
       url:'http://localhost:8888/index.php/trial/insert_into_db',
       type: 'POST',
       data: $("#myForm1").serialize(),
       success: function(){
           alert("success");
       },
       error: function(){
           alert("Fail")
       }
   });
   e.preventDefault();
});


</script>

控制器

  function insert_into_db(){
    $this->load->model('insert_db');
    $this->insert_db->insertQ();  
}

型号

 class Insert_db extends CI_Model{

    function insertQ(){
        $email = $_POST['email'];
        $qText = $_POST['qText'];
        $this->db->query("INSERT INTO questions VALUES('','$email','$qText','','')");
    }
 }

【问题讨论】：

您能否提供更多有关单击按钮时发生的情况的信息？您是否检查过是否触发了 AJAX 事件？还要检查 HHTP 事件以查看是否发布了 Ajax 帖子。
如何检查 HHTP 事件？
如果您使用 Firefox，您可以使用 Web 控制台工具，从工具 > Web 开发人员 > Web 控制台。或下载“实时 HTTP 标头”插件以观看正在进行的 HTTP 事务。还有其他几种工具，但这些是简单的一种。我对任何工具都没有偏见。
您使用的是哪种浏览器？
我正在使用 Chrome @david Knipe

标签： php jquery ajax database codeigniter

【解决方案1】：

正如@David Knipe 所说，在尝试访问其中一个元素之前，您应该等待 DOM 准备就绪。此外，您可能会遇到 e is undefined 错误，因为您没有将事件引用传递给点击处理程序：

<script>   //no need to specify the language
 $(function(){
  $("#submitbutton").click(function(e){  // passing down the event 

    $.ajax({
       url:'http://localhost:8888/index.php/trial/insert_into_db',
       type: 'POST',
       data: $("#myForm1").serialize(),
       success: function(){
           alert("success");
           $('#email').val('');
           $('#qText').val('');
       },
       error: function(){
           alert("Fail")
       }
   });
   e.preventDefault(); // could also use: return false;
 });
});
</script>

更完整地说，您的查询很容易受到攻击，您可能会在那里遇到错误。利用在您下方拥有框架的优势：

function insertQ(){
    $email = $this->input->post('email');
    $qText = $this->input->post('qText');
    $this->db->insert('questions', array('email' =>$email, 'text' => $text));
}

^_我猜是列名，因为你没有指定它们

【讨论】：

非常感谢@Damien Pirsy。我实现了这段代码，它工作正常。还有一件事：你知道提交后如何清除字段吗？现在我点击提交，数据已正确发送到数据库，但页面没有改变，输入字段中仍然有文本。感谢您提供的任何额外信息:)
为什么要删除开头的$(function() {行？
@DavidKnipe Ops，我在<script>之后添加了评论，我不小心删除了，谢谢！
@user2796352 您可以将它们的值设置回''，查看更新的答案。

【解决方案2】：

您好像忘记使用$.ready。事实上，javascript 在页面加载之前运行，这意味着它无法从$("#submitbutton") 找到页面元素。试试这个：

$(document).ready(function() {
    $("#submitbutton").click(function(){
    ....
    ....
});

【讨论】：

不是$(document).ready(function(){}) 还是只是$(function(){})？
我已经添加了 $(document).ready(function(){ 代码，它仍然给我错误函数响应@damien pirsy
@David Knipe 我尝试使用 $.ready(function() { 并没有收到来自 AJAX 的响应。
@Damien 你是对的，其中任何一个都可以。我已经改变了我的答案。 user2796352，Damien 的答案是一样的，但更清楚:-)
@user2796352 你可能在某个地方有其他错误，你的警报对调试没有帮助。