如何将其转换为 AJAX 函数

Question

目前我有一个表单按钮，单击该按钮会重新加载页面并发布数据，然后运行 ​​mySQL 命令，这可以找到，但我需要立即显示数据而不是再次刷新，我可以在查询后重新加载页面，但是这会耗尽我的资源。我尝试阅读 AJAX，但我无法理解它（或无法让它工作！！）

任何人都可以告诉我如何解决这个问题吗？我当前的代码是...

    elseif(isset($_POST['int1'])) {
        $interest = $_POST['int1']; 
        $qResult= mysql_query("DELETE from user_interests WHERE interest = '" . mysql_real_escape_string($interest) . "' and user_id = " . $usersClass->userID());
        if(! $qResult )
            {
              die('Could not delete data: ' . mysql_error());
            }    
    }
    if($interest1 != ''){
        print $interest1 . "<form method='post' action='#'><input type='hidden' value='".$interest1."' name='int1' id='int1'/><input type='submit' value='delete' /></form><br />";
    }

Answer 1

如果您刚刚开始使用 AJAX，我建议您使用 jQuery —— 它将使您的一切都能跨浏览器工作。

$('#id_of_your_submit_button').click(function(e){
    $.ajax({
       type: "GET",
       url: "where_you_put_your_php.php",
       data: "some_info=" + $('#your_input_or_whatever'),
       success: function(msg){
             $('#id_of_where_you_want_info_to_go').html(msg);
       }
    });
    e.preventDefault(); // Tell submit button not refresh page
});

然后，您的表单信息（数据）将位于您放入 PHP 的文件中名为 $_GET['some_info'] 的变量中。echo 输出您想要返回的内容到文档，它将出现在您想要信息所在位置的 ID 中（请参阅代码中的名称。）

Answer 2

尝试浏览此页面 http://roshanbh.com。 np/2008/04/ajax-login-validation-php-jquery.html ...我认为这正是您现在所需要的。如果您有任何困惑，请随时在这里回复。

Answer 3

首先：了解如何在网页中实现 jQuery。

然后你可以使用 jQuery 框架来处理你的 ajax 查询。

首先，创建一个如下所示的代码块：

<?php
if(isset($_POST['ajax'])){
    //Your code goes here
}
?>

从那里创建一个 Ajax 函数：

$('#submit_button_id').click(function(){
    jQuery.post('/webpage.php',{
        'ajax' : true
    },function(data){
        //Stuff for your page to do when your page call loads.
    },'html'
});

jQuery 在其网站上有很多文档，因此您应该轻松了解如何使用它。

Answer 4

首先，使用 jQuery 库 http://www.jquery.com！它极大地简化了 JavaScript 的使用。然后给你的

<input type='submit' value='delete' id="delete_button" />

引用 jQuery 库（最好将其放在 html 的最底部，标签的正上方），

然后在其后面添加一段像这样的 jQuery 代码（您可能需要更改它以满足您的需求，但我尝试非常接近）

<script type="text/javascript">

$(document).ready(function() { // this only happens when DOM is fully loaded

    $('#delete_button').click(function(e){

        var int1Val = $('#int1').val();

        $.post("your_page.php",
            { int1: int1Val, maybeSomeOtherVar: "coolbeans value" },
            function(data) { // if your_page.php sends any response back, then this function gets called
            alert("Data loaded from server POST: " + data);
        });

        $('#someMessageDivID').text(int1Val); // to immediately display the form value somewhere

        e.preventDefault(); // I'm not sure if you need this if you also have return false below, but I always put both just to make sure the form doesn't submit on its own, because we have already done it above
        return false;

    });

});

</script>

您可以使用 AJAX 创建一些非常时髦的桌面感觉网页，所以享受了解它的乐趣。我希望这有帮助！