简体   繁体   中英

send multidimensional array to php using ajax as json and receive html text to show in a div

First part is completed, The data is successfully sent to php using ajax as json (I did it by following an answer to an already posted question on this site).

Now how to access these values in php, and after using the string in abc[2] as sql query and printing the result in php(second page) using html in a table format (in second page), how to receive that response after ajax call completes in first page to show it in a div in first page.

Actually I am not asking about the procedure of running query and displaying values. I am facing problem in accessing these array values in php and displaying them back in first page using ajax.

whenever I return some value from first page (using echo or print function), I receive an alert about syntax error: unexpected tocken after the ajax call comes back from second page. The code in first page is

var abc= {};

abc[0] = {};
abc[0]['name'] = 'first col';
abc[0]['width'] = 123;

abc[1] = {};
abc[1]['name'] = 'second col';
abc[1]['width'] = 456;

abc[2]="abcdefghijklmnopqrstuvwxyz";



$.ajax(
{
    type: "POST",
    url: "query.php",
    data: {abc: abc},
    dataType: "json",
    beforeSend:function()
    {
    // Do something before sending request to server
    },
    error: function(jqXHR, textStatus, errorThrown)
    {

        alert(errorThrown);
    },
    success: function(data)
    {

        alert(data);
    }
});

我不知道...您可以尝试这个。

$param = cleanAll();

You can do it in this way :

  • Send parameter to your query.php file using ajax.
  • In query.php file write logic to process on posted data save/edit/fetch data from/to DB and create html to print in div and echo that html
  • Inside your ajax call when success put that html to div which is returned from query.php.
    Here are few changes on your ajax code:

Array will like this

 var abc= {abc :[{name:'first col',width:123},{name:'second col',width:456},{name:"abcdefghijklmnopqrstuvwxyz",width:456}] }; 

Ajax will like this

    $.ajax(
        {
            type: "POST",
            url: "query.php",
            data: abc,
            dataType: "json",
            beforeSend:function()
            {
            // Do something before sending request to server
            },
            error: function(jqXHR, textStatus, errorThrown)
            {    
                alert(errorThrown);
            },
            success: function(my_html)
            {

                $('#my_div').val(my_html);
            }
    });


Code is not tested but it should work.

As I understand from my recent experiment, array will be placed to object before converting to JSON. Below my code:

JavaScript:

...    
var read_numbers = new Array();
...
function read_ajax_done(num, num_in_word){
    rec_count_in_cache = rec_count_in_cache + 1;

    var number = {"num" : "", "word" : ""}; // Object type
    number.num = num;
    number.word = num_in_word;

    read_numbers[rec_count_in_cache-1] = number; // Array is multidimensional
} 

function save_to_db(read_numbers) {
    var object_read_numbers = {"read_numbers" : read_numbers}; // Array placed to object
    JSON_read_numbers = JSON.stringify(object_read_numbers); // Object converted to JSON

    request = $.ajax({
                    type     : "POST",
                    url      : "post.php",
                    data     : {read_numbers : JSON_read_numbers}
                });
    request.done(function(msg) { 
        alert("Respond: "+ msg);
    });
    request.fail(function(jqXHR, textStatus) {
            alert("Function inaccessible: " + textStatus)
    });
} 

PHP:

if (isset($_POST["read_numbers"])) {
   $read_numbers = json_decode($_POST["read_numbers"], TRUE);
   ..... 
   $response = $read_numbers["read_numbers"][n]["word"];
}

echo $response;

Second Page PHP

<?php
    //need for displaying them back to the $.ajax caller
    header('Content-type: application/json');
    //accessing data
    $post = $_POST['abc'];
    /*
     * how to access multid array
     * $post[0]['name'] = 'first col'
     * $post[0]['width'] = 123
     * $post[1][name] = 'second col'
     * $post[2] = 'abcdefghijklmnopqrstuvwxyz'
     */
    //now to pass them back to your $.ajax caller
    echo json_encode($post);
?>

First Page

$.ajax(
{
    type: "POST",
    url: "query.php",
    data: {abc: abc},
    dataType: "json",
    success: function(data)
    {
    //prints your response variable
    console.log(data);
    }
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM