發布數組缺少來自ajax請求的json

Question

我正在嘗試制作動態文檔預覽器。 用戶可以輸入某些文檔標題選項，並根據其帳戶信息將生成帶有動態標題的文檔。 我最終想預覽一個完整的pdf，但是我現在只在處理標題。

我想做的是制作一個頁面，用戶可以填寫表格，然后按一個按鈕預覽標題。

$.ajaxSetup({
type:       'POST',
timeout:    10000
});

$("#preview_header").click(function(){
    var full_url = //appropriate URL 

    var preview_data = {    
        "wsid":             "default",
        "page":             "default",
        "banner_area1":     "default",
        "banner_area2":     "default",
        "banner_area3":     "default",
        "uid":              "default",
        "fid":              "default",
        "cid":              "default",
        "assignment_type":  "default"
    };

    preview_data.wsid               = $("#worksheet_picker").val();
    preview_data.page               = $("#page_picker").val();
    preview_data.banner_area1       = $("#banner_area1").val();
    preview_data.banner_area2       = $("#banner_area2").val();
    preview_data.banner_area3       = $("#banner_area3").val();
    preview_data.uid                = $("#member_uid").val();
    preview_data.fid                = $("#family_id").val();
    preview_data.assignment_type    = 'family';
    preview_data.cid                = $("#class_id").val();

    var JSONText = JSON.stringify( preview_data );
    alert('Full JSON - ' + JSONText);

    $.ajax({
        async: true,
        url: full_url,
        data: { previewInfo : JSONText }, //Passes necessary form information
        dataType: 'json',
        success: function(output){
            var reply = output;
            if ( reply.status == "success" ){
                $("#preview").attr("src", reply.image );
            } else {
                alert('Failed to create image preview of the assignment.');
            } 
        } 
    });
});

據我所知，上述方法運行良好。 它會到達正確的Codeigniter頁面，並且當ajax方法設置為返回硬編碼圖像時，它就可以正常工作。 AJAX似乎格式正確，但以防萬一，當我用相應的值填寫表格時，它會輸出以下內容：

Full JSON - {"wsid":"4","page":"1","banner_area1":"link1",
"banner_area2":"link2","banner_area3":"link3",
"uid":"1","fid":"1","assignment_type":"family"}

所以首先，讓我們從ajax答復的相應控制器方法中的工作開始：

$data = array(
'status'    => 'success',
'image'     => //static image link
);

$this->output->set_content_type('text/javascript;charset=UTF-8');
echo json_encode($data);

但是每當我嘗試像這樣修改它時：

$preview_data = json_decode($this->input->post('previewInfo'));

//Got this one
mail('me@gmail.com', 'Start Email', 'Some email' ); 
//Empty email
mail('me@gmail.com', 'Dump Post', var_dump($_POST)); 
//Empty email
mail('me@gmail.com', 'Post data', var_dump($preview_data) );
//returns an email with 1 for body
mail('me@gmail.com', 'Post data', print_r($this->input->post()) ); 
//returns an email with 1 for body
mail('me@gmail.com', 'Post data', 
     print_r($this->input->post('previewInfo')) ); 
//returns an email with 1 for body
mail('me@gmail.com', 'Post data', print_r($preview_data) );

$data = array(
'status'    => 'success',
'image'     => //static image link
);

$this->output->set_content_type('text/javascript;charset=UTF-8');
echo json_encode($data);

修改后的代碼也不返回靜態數據。 因此，似乎未正確初始化post數組。 有人看到錯誤了嗎？

Answer 1

如果要使用post方法發送Ajax請求，則需要在$.ajax選項中將type設置為POST 。

另外，默認情況下async為true，因此無需設置。 另外，您應該考慮使用.done和.fail而不是success和fail ，因為它們很快就會被棄用。

像這樣：

$.ajax({
    type: "POST",
    url: full_url,
    data: { previewInfo : JSONText }, //Passes necessary form information
    dataType: 'json'
}).done(function (output, textStatus, jqXHR) {
    var reply = output;
    if ( reply.status == "success" ){
        $("#preview").attr("src", reply.image );
    } else {
        alert('Failed to create image preview of the assignment.');
    } 
}).fail(function (jqXHR, textStatus, errorThrown) {
    // now you have the XHR, text status, and error to debug with
});

Answer 2

有兩個問題可以解決這個問題：

1）

正如Austin和Gavin所說：var_dump和print_r不應輸出到瀏覽器。 解決方案是使用firefox擴展/ chrome進行調試。

2）

$preview_data = json_decode($this->input->post('previewInfo'));

改為

$preview_data = json_decode($this->input->post('previewInfo'), true);

json_decode的第二個可選參數是告訴方法您是要關聯對象還是事物列表。 碰巧的是，我正在閱讀並想要一個關聯數組。