使用ajax如何在成功后显示值而不刷新页面

时间:2013-10-07 08:09:03

标签: javascript php jquery ajax

我在添加后使用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;
    });
    });

3 个答案:

答案 0 :(得分:2)

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

要从PHP返回JSON响应,可以使用json_encode()函数:

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

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

在这段代码中,您可以设置dataType或JSON并返回多个值,包括要注入页面的DOM(DOM):

$.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更新。

答案 1 :(得分:1)

只是尝试从ajax函数返回所需的值。这样的事情可能会发生。

insert.php

echo or return data末尾的function需要填入页面

$.ajax({
    type: "POST",
    url: "supplierpriceexport/insert.php",
    data: dataString,
    cache: false,
    success: function(data){
             //Now you have obtained the data that was was returned from the function
             //if u wish to insert the value into an input field try
           $('#input_field').val(data); //now the data is pupolated in the input field 

     }
    });

答案 2 :(得分:0)

请勿使用window.location = "?action=suppliertargetpiceexport";

这将重定向到页面suppliertargetpiceexport

$.ajax({
    type: "POST",
    url: "supplierpriceexport/insert.php",
    data: dataString,
    cache: false,
    success: function(html){
        $('#your_success_element_id').html(html); // your_success_element_id is your element id where the html to be populated
        $("#flash").hide();
    }
});

your_success_element_id是要填充html的元素ID