无法从通过php发送的ajax响应更新div文本(Unable to update div text from ajax respe sent via php)

无法从通过php发送的ajax响应更新div文本(Unable to update div text from ajax respe 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：

根据点击触发的位：

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

带有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: " + JSO.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可见，但只有在成功或错误触发时才设置。

Apologies for this question if something out there covers this. I searched and found many relevant posts which has allowed me to get to this point.

I have a form snippet with 1 input box and a button and a div for a status message:

<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>

Then I have the following bits of javascript:

The bit that triggers based on the click:

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

The javscript with the ajax call:

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: " + JSO.stringify(discount_code)); } }); }};

And I have a PHP file that, suffice it to say, is working and producing the following json outputs based on the input:

// 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")); }

In the above, I have bootbox.alert lines commented out but when they are active, the box appears and the message is as I would expect it to be.

And lastly, the first condition that triggers if the input box is empty, both fires the alert (when not commented) AD changes the text of #status_msg.

I put the border in to verify visibility and #status_msg is visible but just is not set when either success or error fires.

最满意答案

在ajax()设置这样的数据。

success: function(data) { var result = eval(data); $('#status_msg').html(); $('#status_msg').fadeIn(0); //bootbox.alert(data); }, error: function(data) { var result = eval(data); $('#status_msg').html(); $('#status_msg').fadeIn(0); //bootbox.alert("Error validating discount code: " + JSO.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)); }

Set your data like this inside ajax().

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

AD

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)); }