我尝试在Codeigniter中通过jQuery ajax()提交表单......但没有任何反应...... :(

时间:2013-11-10 11:02:14

标签: php jquery ajax codeigniter

抱歉这个重复的&重复的问题,但我真的不知道如何解决。

有一个按钮和两个text_input,当我点击此按钮时,如果它正常工作,我会看到一个警告并向我显示“成功”,但不幸的是,我什么都看不见。

没什么!!

我不知道为什么:(

请帮助我,请......我在stackoverflow或其他网站上阅读了很多关于codeigniter的教程,但是我找不到任何可以解决我的问题,请教我们。

下面是一个非常简单的表格

文件名:test.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test </title>
    <link rel="stylesheet" href="<?=base_url("/css/bootstrap.css")?>">
    <link rel="stylesheet" href="<?=base_url("/css/basic.css")?>">
    <script src="<?=base_url("/js/jquery-1.10.2.min.js")?>"></script>
    <script src="<?=base_url("/js/bootstrap.js")?>"></script>
    <script src="<?=base_url("/js/practice.js")?>"></script>
</head>
<body>

<div style="margin:19px">
    <form id="test_form" method="post">
    USER:<input id="num" name="num" type="text" ><br> 
    NAME:<input id="name" name="name" type="text" ><br>
    <input id="submit" name="submit" class="btn" type="submit" value="save"> 
    </form>
</div>
</body>
</html>

我想通过jQuery Ajax()以这种形式提交数据,JS文件位于

之下

文件名:practice.js

$(document).ready(function(){
    $("#test_form").submit(function(e){     
        e.preventDefault();

        var tdata= $("#test_form").serializeArray();

        $.ajax({
            type: "POST",
            url: "http://localhost/index.php/static_data/test_add",
            dataType: json, 
            data: tdata, 

            success:function(tdata)
            {
                alert('SUCCESS!!');
            }
        });
    });
});

以下是我的控制器

文件名:static_data

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Static_data extends CI_Controller {

  public function test()
  {
    $this->load->view('test');      
  }

  public function test_add()
  {
    $this->load->model("paper");
    $this->paper->test_add();
  }
}

以下这个文件是我的模型集

文件名:paper.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');  
class Paper extends CI_Model {  

  function __construct()  
  {  
    parent::__construct();  
  }  

  function test_add()
  {  
    $this->load->helper('form');
    $this->load->helper('html');
    $this->load->database();
    $tdata = array(
      'num' =>  $this->input->post('num'),
      'name' =>  $this->input->post('name'),
    );
    $this->db->insert('test_table',$tdata);  
  }      
}  

3 个答案:

答案 0 :(得分:3)

试试这个 - &gt;在test.php文件中,将操作属性设为

action="<?php echo site_url();?>/static_data/test_add"

然后,在您的practice.js文件中:

$('#test_form').submit(function() {
var tdata= $("#test_form").serializeArray();
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = tdata;

现在,要进行测试,请在success中的practice.js函数中编写以下内容:

success: function(response) {
         console.log(response);
}

在这里,您获得的响应是​​您的控制器返回给您的,现在要测试它,只需键入echo "hello";或其他任何东西,只需回显一些东西。 (这是因为你说教我:))

现在看看这是否有效,打开开发工具(如果你在谷歌浏览器中),转到控制台选项卡然后从底部选择日志,如果一切正常,它将返回你写的回显信息控制器。

另外,要查看表单是否正确提交,请选择网络选项卡,当您点击提交按钮时,网络选项卡将显示数据是否已正确提交。

试试这个,如果不起作用,请发表评论。

答案 1 :(得分:1)

我认为您可以通过以下简单的ajax请求轻松解决此问题:

$(document).ready(function(){

    $("#test_form").on("submit", function(event){
         event.preventDefault();
         $.ajax({
              url : base_url+"static_data/test_add",
              type : "post",
              data : $("#test_form").serialize(),
              dataType : "json",
              success(data)
              {
                  alert('SUCCESS!!');
              } 
         });
    });

});

在此之前,请在头文件的视图文件(test.php)中写下

<script>
    var base_url = "<?php echo base_url(); ?>";
</script>

答案 2 :(得分:0)

试试这个:

Practice.js

$(document).ready(function(){

    $("#test_form").submit(function(e){     
        e.preventDefault();

        var tdata= $("#test_form").serializeArray();

        $.ajax({
            type: "POST",
            url: 'http://localhost/[CodeIgniterDirectory]/index.php/static_data/test_add',
            data: tdata, 

            success:function(tdata)
            {
                alert('SUCCESS!!');
            },
            error: function (XHR, status, response) {
               alert('fail');
            }

        });
    });
});