Question

我正在尝试清理我的网站代码，并试图在从MySQL查询中获取新数据时尝试减少页面重新加载。

目前，我有一个表单，允许用户选择类别，然后使用action =＆＃34; currentpage.php＆＃34;传递到同一页面。这是由访问数据库的第二个html脚本获取的，并生成符合条件的文章模板。

不幸的是，就目前而言，考虑到我需要更改的仅有2个脚本，整个页面重新加载似乎非常草率。

如果在检测到按钮按下时如何使用运行查询更新的脚本？

我已经读过AJAX是要走的路，但我不能从我见过的例子中了解它。没有数据实际离开页面，它只是循环。

我想我需要使用MySQL脚本来显示结果并将其调用，但同样，我还不确定如何调用整个脚本。

我对php非常陌生，不确定我到底在寻找什么，所以尝试谷歌寻求解决方案就像在黑暗中拍摄一样。

我到底想要完成这项任务的是什么？如果可能的话，还有一个来源来阅读如何操作：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函数中，我们正在显示将somepage.php中的HTML返回到您需要的空div中放在文档中的某个位置。

注意：在使用$.ajax功能之前，您需要在页面上包含jQuery库。

DEMO

Answer 2

使用ajax，您可以向服务器发出请求。使用jquery这很容易：你做什么

使用javascript制作网页
制作一个PHP脚本来获取您想要的数据
对您的PHP脚本进行javascript调用
将数据放回页面

示例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/en/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);
}

按下提交按钮而不是页面刷新时重新加载php脚本

3 个答案: