如何使用ajax使用jquery提交帖子數據？

Question

我無法讓Ajax與jquery和codeigniter一起使用。 我遵循了多個教程，但似乎無濟於事。 我正在嘗試實現一個upvote按鈕，該按鈕使用ajax發送要插入數據庫中的帖子數據。 任何幫助深表感謝。

從我看來，代碼是：

<pre>
<?php foreach($query->result() as $row): ?>
<div>
<form action="" method="post">
<input type="hidden" name="story_id" value=<?php echo $row->id; ?>>
<input type="submit" name="story_id" class="button" id="submit_btn" value=<?php echo      $row->id;?>>
</form>
</div>
<?php endforeach; ?>
</pre>

我正在使用的jQuery腳本：

<pre>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
    var form_data = {
        story_id: $(this).val()
    };
    $.ajax({
        url: "<?php echo base_url('cyoa/upvote'); ?>",
        type: 'POST',
        data: form_data,
        success: function() 
            {
            $("#upvote").hide();
            }
    });
    return false;
});
});

</script>
</pre>

Answer 1

最好的方法是序列化表單數據並將其發送到服務器：

<script type="text/javascript">
$(document).ready(function(){
  $(".button").click(function(){
    var form_data = $("#myform").serialize();
    $.ajax({
        url: "<?php echo base_url('cyoa/upvote'); ?>",
        type: 'POST',
        data: form_data,
        success: function() 
            {
            $("#upvote").hide();
            }
    });
    return false;
  });
});

</script>

要訪問該表單，請為其提供一個ID：

<form id="myform" action="" method="post">

Answer 2

我強烈建議看一下這個插件（並使用它）：

jQuery表單插件

Answer 3

您可以使用表單序列化將數據傳遞給php，如下所示

首先給您的表單標簽提供ID“ storyform”

$.ajax({
        url: "<?php echo base_url('cyoa/upvote'); ?>",
        type: 'POST',
        data: $("#storyform").serialize(),
        success: function() 
            {
            $("#upvote").hide();
            }
    });

Answer 4

嘗試使用json對象，

視圖....

<pre>
<?php foreach($query->result() as $row): ?>
<div>
<form action=" controller_name/upvote" method="post">
<input type="hidden" name="story_id" id = "story_id" value=<?php echo $row->id; ?>>
<input type="submit" name="story_id" class="button" id="submit_btn" value=<?php     echo      $row->id;?>>
</form>
</div>
<?php endforeach; ?>
 </pre>

然后你的控制器，

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

class Controller_name extends CI_Controller {

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

    //loading libraries
    $this->load->helper(array('form','url'));

    $this->load->library('form_validation');


}
//##############################################################################
    function upvote(){


    //setting validation rules
    $this->form_validation->set_rules('story_id', 'story Id', 'required|xss_clean');


    if ($this->form_validation->run() == true){

        //if validations ok, send the  data to  database
        $this->load->model('your_model');

        $params = ($this->input->post('story_id');

        $query = 'INSERT INTO table_name (story_id) VALUES(?)';
        $result = $this->your_model_name->method_name($query,$params);

        echo '{"validation_result": "passed"}';

    }
    else{
        $output = '{"story_id":"'.form_error('story_id').'"}';

        echo $output;
        }

}
}
?>

然后你的Java腳本文件

$(document).ready(function(){
$('#submit_btn').live('click',function(){

    var form_data = {
                    $story_id: $('#story_id').val()
                };

                $.ajax({
                    type: "POST",
                    url: baseurl+"controller_name/upvote",
                    dataType: "json",
                    data : form_data,
                    success: 
                        function(data){

                            if(data.validation_result == "passed"){

                                $("#upvote").hide();


                            }
                            else{
                                //form_validation errors
                                }
                        }
                    });

        return false;   
    });
});