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

Question

i am adding the value to database by using ajax after adding i want to display the value in front end but now after success i am using window.location to show the data because of this the page getting refresh,i don't want to refresh the page to show the data ,anyone guide me how to do this.

below is my 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

The code that you are using to post the data needs to return some meaningful data, JSON is useful for this, but it can be HTML or other formats.

To return your response as JSON from PHP, you can use the json_encode() function:

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

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

In this piece of code, you can set your dataType or JSON and return multiple values including the HTML that you want to inject into the page (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");
        }
});

You can strip out the window.location altogether, else you won't see the DOM update.

Answer 2

Just try to return the values that you need from the ajax function.Something like this might do.

In your insert.php

echo or return the data at the end of the function that needs to be populated into the page

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

     }
    });

Answer 3

Don't use window.location = "?action=suppliertargetpiceexport";

This will redirect to the page 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 is your element id where the html to be populated