當按下提交按鈕而不是頁面刷新時，重新加載php腳本

Question

我試圖清理我的網站代碼，並試圖從MySQL查詢中獲取新數據時減少頁面重載。

目前，我有一個表格，允許用戶選擇類別，然后使用action =“ currentpage.php”傳遞到同一頁面，該類別由訪問數據庫並生成與模板匹配的文章模板的第二個html腳本拾取。條件。

不幸的是，就目前而言，整個頁面都重新加載，考慮到我只需要更改其2個腳本，這似乎很草率。

當檢測到按下按鈕時，如何運行運行查詢更新的腳本？

我讀過AJAX是必經之路，但我無法從所看到的示例中了解它。 實際上沒有數據離開頁面，它只是循環而已。

我想我需要一個將結果分開顯示的MySQL腳本並調用它，但是同樣，我不確定如何調用整個腳本。

我是php的新手，不確定我到底在尋找什么，因此嘗試使用Google解決方案就像在黑暗中拍照。

我實際上在尋找什么來完成這項任務？ 並盡可能提供閱讀方法的資料：D

謝謝

Answer 1

你是對的。 Ajax將是前進的最佳方式。 因此，您可以執行以下操作：

$(function(){
$('#your_select_id').change(function () {
    var select_value = $(this).val();
    if ($.trim(select_value) != '') {
        $.ajax({
            type: 'post',
            url: 'somepage.php',
            data: {
                selected_value: select_value
            },
            success: function (returned_data) {
                $("#your_result_div_id").html(returned_data);
            }
        });
    }
});
});

那我們在這里做什么？

• 首先，我們正在監聽select標記的onchange事件。
• 在這種情況下，我們將捕獲用戶選擇的值。
• 然后對頁面somepage.php進行ajax調用，並將選擇標簽的值發送給它。
• 在somepage.php ，您可以基於該值（ $_POST['selected_value'] ）查詢數據庫並返回HTML。
• 最后，在success函數中，我們將返回的HTML從somepage.php顯示到一個空div中，您需要將其放置在文檔中的某個位置。

注意：在使用$.ajax函數之前，您需要在頁面上包含jQuery庫。

演示

Answer 2

使用ajax，您可以將請求發送回服務器。 使用jQuery，這真的很容易：您做什么

1. 用javascript制作頁面
2. 制作一個PHP腳本來獲取您想要的數據
3. 使javascript調用您的php腳本
4. 將數據放回您的頁面

示例PHP：

<?php echo json_encode(array("firstname"=>"mark","lastname"=>"smit"));?>

示例javascript：

    $("#button").click(function(){
    $.get( "test.php", function( data ) {
       $(".firstname").html(data.firstname);
       $(".lastname").html(data.lastname);
     }, "json" );
   });

您可以在此處找到有關get in jquery的更多文檔： http ://api.jquery.com/jQuery.get/

您可以在此處找到有關json的更多信息： http : //www.php.net/manual/zh/function.json-encode.php

Answer 3

解決方案很簡單，但是您需要javascript，ajax和json的支持。

這是您需要做的：

1）首先，您需要像下面這樣設置表單：

<form action="yourpage.php" method="POST">..</form>

2）然后，您必須攔截單擊“提交”按鈕，並防止默認行為將表單發送到php並重新加載整個頁面，如下所示：

我假設您正在使用jQuery框架：

$("#yourbutton").on("click", function (e) {
   var obj, $this;

   //wrap the button with jquery object for future convenience
   $this = $(this);

   //prevents default browser behavior
   e.preventDefault();

   //collects data from forms
   obj= collectData($this)

   //sends data through ajax, and wait for the callback
   sendData($this,obj)

});

3）然后，您必須從表單中的輸入中收集所有數據，並將它們保存到一個對象中，如本示例所示：

function collectData(obj){
    var inputs, i, len, cache, ret = [];


    inputs = $obj.find("input");
    for(i = 0, len = inputs.lenght; i < len; i = i + 1) {
        cache = obj.eq(i);

        //You can insert any attribute you like in the object, and you should pay attention 
        //to the differents parameters you need to save, for example when you handle 
        //textareas etc.

        ret.push = {id: cache.attr("id"), name: cache.attr("name"), value:  
cache.val()}; 
    }

    return ret;
}



    function sendData(source, obj){
        var json, settings, url;

        //encode the obj using json, and prepare it for php
        json = JSON.stringify(obj);

        //get the url of the php page where you'll handle the data
        url = source.attr("action");

        //set up the ajax connection
        settings = {

            //this is the big thing! you will receive the response of PHP here    
            success: function (data) {
                var result;
                //data is the result of your php script
                result = JSON.parse(data);

            },

            //You can reference jQuery ajax docs to better understand why i've used this settings
            cache: false,
            type: "POST",
            //in the jdata var, you will find your form object in php
            data: {jdata: json},
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            async: false
        };

        $.ajax(url, settings);

    }

Finally PHP script:

yourpage.php

if(isset($_POST["jdata"])){
    $request = $_POST["jdata"];
    $id = $request -> id;

    //[....] treat all your data and so on

    //In the end return the data from your PHP script. 
    echo json_encode($array);
}