php - Not able to display ajax response in already created div tag

Question

Hi all i am trying to show ajax response in already created div but i am not able to show. Can you please help me where i am doing wrong.

<form id="coupon" action="">
    <label>Have a Coupon?</label>
    <input name="couponcode" id="couponcode" value="" />
    <input type="submit" value="Apply" />
</form>
<div id="result"></div>

Now my Jquery function is below one.

$("#coupon").submit(function (event) {

    /* Stop form from submitting normally */
    event.preventDefault();

    /* Clear result div*/
    $("#result").html('');

    /* Get some values from elements on the page: */
    var values = $(this).serialize();

    /* Send the data using post and put the results in a div */
    $.ajax({
        url: "coupon.php",
        type: "post",
        data: values,
        success: function (response) {
            $('#result').html(response);
        }
    });
});

My coupon.php file code is below one.

<?php
if (!empty($_POST)) {

    $coupon = $_POST['couponcode'];

    //json_encode(array('coupon' => $coupon));

    echo $coupon;
}
?>

Answer 1

代码需要连接标记中的响应写入div.

$.ajax({
    url: "coupon.php",
    type: "post",
    data: values,
    success: function (response) {
        $('#result').html("<div id='message'>"+ response+"</div>");
    }
});

Answer 2

尝试使用

$.ajax({
  url: "coupon.php",
  type: "post",
  data: values,
  success: function (response) {
    $('#result').text(response);
  }
});

Answer 3

表单提交的默认方法是 GET，但您通过 post 发送值。将 method=post 添加到表单标签

<form id="coupon" action="">
    <label>Have a Coupon?</label>
    <input name="couponcode" id="couponcode" value="" />
    <input type="submit" value="Apply" />
</form>
<div id="result"></div>
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("#coupon").submit(function (event) {

    /* Stop form from submitting normally */
    event.preventDefault();

    /* Clear result div*/
    $("#result").html('');

    /* Get some values from elements on the page: */
    var values = $(this).serialize();

    /* Send the data using post and put the results in a div */

    $.ajax({
        url: "coupon.php",
        type: "post",
        data: values,
        success: function (response) {
            $('#result').html(response);
        }
    });
});
});
</script>

当我尝试这个时它工作正常