簡體   English   中英

無法通過php發送的ajax響應更新div文本

[英]Unable to update div text from ajax response sent via php

如果有什么可以解決的,對此問題表示歉意。 我搜索並找到了許多相關的帖子,這些使我到了這一點。

我有一個帶有1個輸入框和一個按鈕以及一個div的狀態消息的表單片段:

<div>
    <div>
        <div>
            <input id="discount_code"name="discount_code" placeholder="  Enter discount code."></input>
        </div>
        <div>
            <a class="btn btn-xs btn-primary" id="btn-validate">Validate</a>
        </div>
    </div>
    <div id="status_msg" style="border: 1px solid black"></div>
</div>

然后,我有以下JavaScript代碼:

  1. 根據點擊觸發的位:

    $('#btn-validate').on('click', function(e) { e.preventDefault(); validateCode(11); // "11" is a php-provided ID variable });

  2. 帶有ajax調用的javscript:

     function validateCode(eventID) { var codeValue = $("#discount_code").val(); if (FieldIsEmpty(codeValue)) { // outside function that exists/works fine $('#status_msg').html('Enter a discount code.').fadeIn(500); $('#status_msg').fadeOut(2500); //bootbox.alert("Please enter discount code to validate."); } else { $.ajax({ type: 'POST', cache: false, async: true, url: '/include/discount_validation.php', dataType: 'json', data: { event_id: eventID, discount_code: codeValue }, beforeSend: function() { $('#status_msg').html(''); $('#status_msg').fadeIn(0); }, success: function(data) { $('#status_msg').html(data); $('#status_msg').fadeIn(0); //bootbox.alert(data); }, error: function(data) { $('#status_msg').html(data); $('#status_msg').fadeIn(0); //bootbox.alert("Error validating discount code: " + JSON.stringify(discount_code)); } }); }}; 

而且,我有一個PHP文件,可以滿足要求,並且正在根據輸入生成以下json輸出:

            // do php database things...
header('Content-Type: application/json');

if(!isset($percent)) {
    //echo("Invalid code: '" . $dCode ."'");
    $message = "Invalid code: '" . $dCode ."'";
    echo json_encode(array('status' => 'error','message' => "$message"));
} else {
    $message = "Code: '" . $dCode . "'" . " provides a " . $percent . "% discount.";
    echo json_encode(array('status' => 'success', 'message' => "$message"));
}

在上面,我注釋掉了bootbox.alert行,但是當它們處於活動狀態時,將出現該框,並且消息與我期望的一樣。

最后,第一個條件(如果輸入框為空)將觸發警報(未注釋時)並更改#status_msg的文本。

我放入邊框以驗證可見性,並且#status_msg是可見的,但在成功或錯誤觸發時均未設置。

首先檢查您是否在成功添加響應的對象中添加

alert(JSON.stringify(data));

如果顯示對象,那么您可以繼續進行檢查,否則請檢查創建對象的php文件。

如果成功接收到ajax對象,則需要使用jQuery.parseJSON解析json對象。

例如:

response = jQuery.parseJSON(data);

現在,您有了一個名稱response的javascript對象。

現在使用它

ajax成功時的response['status']response['message']

檢查代碼,首先丟棄:“來自PHP代碼$ message變量

if(!isset($percent)) {
    //echo("Invalid code: '" . $dCode ."'");
    $message = "Invalid code: '" . $dCode ."'";
    echo json_encode(array('status' => 'error','message' => $message));
} else {
    $message = "Code: '" . $dCode . "'" . " provides a " . $percent . "% discount.";
    echo json_encode(array('status' => 'success', 'message' => $message));
}

然后使用對字體結束成功函數的響應:

success: function(data) {

            $('#status_msg').html(data.message);
            $('#status_msg').fadeIn(0);

        },

這樣在ajax()設置數據。

success: function(data) {
            var result = eval(data);
            $('#status_msg').html(result.message);
            $('#status_msg').fadeIn(0);
            //bootbox.alert(data);
        },
        error: function(data) {
            var result = eval(data);
            $('#status_msg').html(result.message);
            $('#status_msg').fadeIn(0);
            //bootbox.alert("Error validating discount code: " + JSON.stringify(discount_code));
        }

if(!isset($percent)) {
    //echo("Invalid code: '" . $dCode ."'");
    $message = "Invalid code: '" . $dCode ."'";
    echo json_encode(array('status' => 'error','message' => $message));
} else {
    $message = "Code: '" . $dCode . "'" . " provides a " . $percent . "% discount.";
    echo json_encode(array('status' => 'success', 'message' => $message));
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM