javascript - 使用ajax如何在不刷新页面的情况下显示成功后的值

Question

我在添加后使用ajax将值添加到数据库我想在前端显示该值但现在成功后我使用window.location来显示数据因为这个页面正在刷新，我不想刷新页面来显示数据，任何人都可以指导我如何做到这一点。

下面是我的ajax

$(function() {
    $(".supplierpriceexport_button").click(function() {

    var pricefrom = $("#pricefrom").val();
    var priceto =  $("#priceto").val();
    var tpm =  $("#tpm").val();
    var currency =  $("#currency").val();


    var dataString = 'pricefrom='+ pricefrom +'&priceto='+priceto+'&tpm='+tpm+'&currency='+currency;


    if(pricefrom=='')
    {
    alert("Please Enter Some Text");
    }
    else
    {
    $("#flash").show();
    $("#flash").fadeIn(400).html;

    $.ajax({
    type: "POST",
    url: "supplierpriceexport/insert.php",
    data: dataString,
    cache: false,
    success: function(html){
    $("#display").after(html);

    window.location = "?action=suppliertargetpiceexport";
    $("#flash").hide();
    }
    });
    } return false;
    });
    });

Answer 1

您用来发布数据的代码需要返回一些有意义的数据，JSON 对此很有用，但它可以是 HTML 或其他格式。

要从 PHP 返回 JSON 格式的响应，您可以使用 json_encode() 函数:

$return_html = '<h1>Success!</h1>';
$success = "true";

json_encode("success" => $success, "html_to_show" => $return_html);

在这段代码中，您可以设置数据类型或 JSON 并返回多个值，包括您要注入(inject)页面 (DOM) 的 HTML:

$.ajax({
    type: "POST",
    url: "supplierpriceexport/insert.php",
    data: dataString,
    cache: false,

    //Set the type of data we are expecing back
    dataType: json

    success: function(return_json){

        // Check that the update was a success
        if(return_json.success == "true")
        {
            // Show HTML on the page (no reload required)
            $("#display").after(return_json.html_to_show);
        }
        else
        {
            // Failed to update
            alert("Not a success, no update made");
        }
});

您可以完全去除 window.location，否则您将看不到 DOM 更新。