如何使用Ajax处理多个echo语句

Question

I am working on wordpress and there I have a php function with multiple echo statements and with ajax I can return only one print statement. So how can I handle multiple print statements with ajax and on ajax side I just append the results to a div. Below is code. Thanks !

php

function display()
{


if(isset($_POST['category'])){

$category = $_POST['category'];
echo '<a href="" style="margin-top:30px !important; position:absolute; z-index:50; font-size:20px;"> Participate </a>';
die();

echo do_shortcode('[ujicountdown id="Photos Contest" expire="2015/04/30 00:00" hide="true" url="" subscr="sdf" recurring="" rectype="second" repeats=""]');
      global $wpdb;
      $votes = 1;
echo $category. '<br>';
//get current competition value

        $comp = $wpdb->get_var("SELECT competition FROM competition ORDER BY cid DESC LIMIT 1");
//echo $comp;
        $sql = "SELECT 1user.uid, 1user.username, 1user.competition, 1user.path, 1user.category, Sum(votes.votes) AS votessum FROM 1user LEFT JOIN votes on 1user.uid=votes.uid GROUP BY 1user.uid, 1user.username, 1user.competition, 1user.path, 1user.category HAVING 1user.category = '$category' && 1user.competition = '$comp' ORDER BY votessum";

$results = $wpdb->get_results($wpdb->prepare($sql)) or die(mysql_error());

foreach( $results as $result ) {
echo '<form action="" method="post">';
echo "<input name='category' type='hidden' value='$result->category'>";

echo "<img src='$result->path' width='150' height='150' >" . '<br><br>';
echo "<input name='id' type='hidden' value='$result->uid'>";
echo "<input name='comp' type='hidden' value='$result->competition'>";
echo $result->username.'<br>';

echo $result->votessum.'<br>';
echo "<input style='margin-bottom:30px;' value='vote' name='submit' type='submit'/></form>";    

}//end of foreach




}//end of isset
else {echo "<h1 style='font-family:Satisfy,cursive; font-size:normal;background-color:pink;'>"."Please select a category"." </h1>";die();}

}

Linking my function for ajax

add_shortcode('showmyimage','showimage');

function showimage(){  





// register & enqueue a javascript file called globals.js
wp_register_script( 'displayimg', get_stylesheet_directory_uri() . "/js/ajaxinsert.js", array( 'jquery' ) ); 
wp_enqueue_script( 'displayimg' );

// use wp_localize_script to pass PHP variables into javascript
wp_localize_script( 'displayimg', 'yes', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

html

[showmyimage]
<form id="mydispimage" action="" method="post">
<select name="category" id="category" style="width:250px; background-color:lightgrey;">';
<option value="" disabled="disabled" selected="selected" ">Select category</option>';
<option value="Cutie Pie">Cutie Pie</option>';
<option value="Chubby">Chubby</option>';
<option value="Dimples">Dimples</option>';
</select>; 
<input type="submit" name="displayimage" value="Search"  style="margin-left:15px; margin-bottom:15px;">
</form>
<div id="myresult"></div>

jquery file with ajax code

jQuery(function ($) {
    $("#mydispimage").submit(function (e) { //form is intercepted
        e.preventDefault();
alert("hello");
        //serialize the form which contains secretcode
        var sentdata = $(this).serializeArray();

        //Add the additional param to the data        
        sentdata.push({
            name: 'action',
            value: 'display'
        })

        //set sentdata as the data to be sent
        $.post(yes.ajaxurl, sentdata, function (res) { //start of funciton
            $("#myresult").html(res);

            return false;
        } //end of function
        ,
        'html'); 
    }); // submit end here
});

Answer 1

I suggest you to return JSON data instead:

function display() {

    $response = array();

    if(isset($_POST['category'])) {

        $category = $_POST['category'];
        $response['link'] = '<a href="" style="margin-top:30px !important; position:absolute; z-index:50; font-size:20px;"> Participate </a>';

        $response['ujicountdown'] = do_shortcode('[ujicountdown id="Photos Contest" expire="2015/04/30 00:00" hide="true" url="" subscr="sdf" recurring="" rectype="second" repeats=""]');

        global $wpdb;
        $votes = 1;

        $response["category"] = $category;


        //get current competition value

        $comp = $wpdb->get_var("SELECT competition FROM competition ORDER BY cid DESC LIMIT 1");

        $sql = "SELECT 1user.uid, 1user.username, 1user.competition, 1user.path, 1user.category, Sum(votes.votes) AS votessum FROM 1user LEFT JOIN votes on 1user.uid=votes.uid GROUP BY 1user.uid, 1user.username, 1user.competition, 1user.path, 1user.category HAVING 1user.category = '$category' && 1user.competition = '$comp' ORDER BY votessum";

        $results = $wpdb->get_results($wpdb->prepare($sql)) or die(mysql_error());

        if( is_array($results) && count($results) > 0  ) {

            $form = "";
            foreach( $results as $result ) {

            $form .= '<form action="" method="post">';
            $form .= "<input name='category' type='hidden' value='$result->category'>";

            $form .= "<img src='$result->path' width='150' height='150' >" . '<br><br>';
            $form .= "<input name='id' type='hidden' value='$result->uid'>";
            $form .= "<input name='comp' type='hidden' value='$result->competition'>";
            $form .= $result->username.'<br>';

            $form .= $result->votessum.'<br>';
            $form .= "<input style='margin-bottom:30px;' value='vote' name='submit' type='submit'/></form>";    

            }//end of foreach
        $response['form'] = $form;
        }

     echo json_encode($response);
     die();

     }//end of isset
     else {
        $respons["status"] = false;
        $response["message"] = "<h1 style='font-family:Satisfy,cursive; font-size:normal;background-color:pink;'>"."Please select a category"." </h1>";

        echo json_encode($response);
        die();
     }

}