How can javascript-PHP be separated from HTML code?

Source: Internet
Author: User
{Code...} php is a little white. Is there a way to separate the front and back ends and return the echo HTML code to the front end in json format?

      
  • Categories
  • ";if(mysqli_num_rows($run_query)>0){ while($row = mysqli_fetch_array($run_query)){ $cid = $row["cat_id"]; $cat_name = $row["cat_title"]; echo "
  • $cat_name
  • "; } echo "

    "; }}?>
    //JS$(document).ready(function() {    cat();    function cat() {        $.ajax({                url: 'action.php',                type: 'POST',                data: {                    category: 1                }            })            .done(function(data) {                //console.log(data);                $("#get_category").html(data);            });    }})

    Php is a little white. Is there a way to separate the front and back ends and return the echo HTML code to the front end in json format?

    Reply content:
    
          
  • Categories
  • ";if(mysqli_num_rows($run_query)>0){ while($row = mysqli_fetch_array($run_query)){ $cid = $row["cat_id"]; $cat_name = $row["cat_title"]; echo "
  • $cat_name
  • "; } echo "

    "; }}?>
    //JS$(document).ready(function() {    cat();    function cat() {        $.ajax({                url: 'action.php',                type: 'POST',                data: {                    category: 1                }            })            .done(function(data) {                //console.log(data);                $("#get_category").html(data);            });    }})

    Php is a little white. Is there a way to separate the front and back ends and return the echo HTML code to the front end in json format?

    With a few lines of code, you can separate the interface and logic to implement MVC:

    /Index. php (page controller) if (! Defined ('root') define ('root', _ DIR _); require ROOT. '/include/common. php'; echo render ('index. php '); // output HTMLecho json_encode (array ('server' => 'php'); // output JSON/include/common. php (public operation) if (! Defined ('root') exit (); require ROOT. '/include/funclass. php';/include/funclass. php (function and class) if (! Defined ('root') exit (); function render ($ view) {ob_end_clean (); ob_start (); require ROOT. '/view /'. $ view; $ html = ob_get_contents (); ob_end_clean (); ob_start (); return $ html;}/view/index. php (view) require _ DIR __. '/header. php '; // if (! Defined ('root') exit (); require _ DIR _. '/footer. php'; // The JS code is generally written in footer. php.Front

    PHP
    echo json_encode($html);
    Front end
    success: function(data) {    $("#get_category").html(data);}

    In this case, the php file is put into a single file, and js can request this file.

    
      
  • Categories
  • "; if(mysqli_num_rows($run_query)>0){ while($row = mysqli_fetch_array($run_query)){ $cid = $row["cat_id"]; $cat_name = $row["cat_title"]; $html.="
  • $cat_name
  • "; } $html.="

    "; echo $html; }}?>

    The data in the database is converted into an array, and the output under json_encode is called by js. The data is obtained, the array under js review (in the done of html ajax) is spliced, and the html is spliced, in this way, php and html are completely separated.

    I think we can first determine what content the front-end page wants to display. Assume that the content is available. based on the content, write the page, and the rest is the data corresponding to the content.
    Php, as mentioned above, provides an api interface, for example, to return json data, and the data in it can be requested to the server through ajax. After obtaining the data, you can use js to fill the data in the page.

    I think you may be thinking about a problem. Is the output list, right. This can be simply done
    After ajax is provided to the front-end, the front-end obtains the json object, which can be done using the front-end template engine. We recommend that you usejuicer

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.