Question

我试图将两个变量（下面）传递给php / MySQL“update $ table SET ....”而不刷新页面。

我希望点击div传递以下变量

$read=0;
$user=$userNumber;

div基本上显示已阅读的邮件，因此应更改颜色。

请问最好的方法是什么？

Answer 1

这里是使用jquery发布到页面并处理json响应的一些代码。您必须创建一个PHP页面，它将接收发布请求并返回您想要它做的任何事情。

$(document).ready(function () {

    $.post("/yourpath/page.php", { read: "value1", user: $userNumber}, function (data) {
        if (data.success) {
          //do something with the returned json
        } else { 
          //do something if return is not successful
        } //if              
    }, "json"); //post
});

Answer 2

创建一个带有两个参数的php / jsp / .net页面

mywebsite.com/ajax.php?user=XXX&secondParam=ZZZZ

将onClick事件附加到DIV

$.get("ajax.php?user=XXX&secondParam=ZZZZ". function(data){
// here you can process your response and change DIV color if the request succeed
});

Answer 3

我不确定我理解。见$.load();

Answer 4

使用更新代码创建一个新的php文件，然后返回一个json，说明它是否有效。你可以使用$ .getJSON jQuery函数来创建它。

Answer 5

要根据jQuery中的ID从DOM中选择一个元素，只需执行以下操作：

$("#TheIdOfYourElement")

或在你的情况下

$("#messageMenuUnread")

现在，要听取它被点击的时间，

$("#messageMenuUnread").click(function(){
   //DO SOMETHING
}

现在，为AJAX带来乐趣。您可以在http://api.jquery.com/category/ajax/阅读文档以获取更多技术细节，但这可以归结为

        $("#TheIdOfYourImage").click(function(){
            $.ajax({
              type: "POST",                                 // If you want to send information to the PHP file your calling, do you want it to be POST or GET. Just get rid of this if your not sending data to the file
              url: "some.php",                             // The location of the PHP file your calling
              data: "name=John&location=Boston",           // The information your passing in the variable1=value1&variable2=value2 pattern
              success: function(result){ alert(result) }   // When you get the information, what to do with it. In this case, an alert
            });
        }

对于颜色更改，您可以使用.css()方法

更改CSS

$("#TheIdOfAnotherElement").css("background-color","red")

Answer 6

使用jQuery.ajax()

您的代码看起来像

<!DOCTYPE html>
<head>

</head>
<body>
    <!-- your button -->
    <div id="messageMenuUnread"></div>
    <!-- place to display result -->
    <div id="frame1" style="display:block;"></div>

    <!-- load jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            //attach a function to messageMenuUnread div
            $('#messageMenuUnread').click (messageMenuUnread);
            //the messageMenuUnread function
            function messageMenuUnread() {
                $.ajax({
                    type: "POST",
                    //change the URL to what you need
                    url: "some.php",
                    data: { read: "0", user: "$userNumber" }
                }).done(function( msg ) {
                    //output the response to frame1
                    $("#frame1").html("Done!<br/>" + msg);
                });
            }
        }
    </script>
</body>

jQuery / JavaScript ajax调用传递变量onClick of div

6 个答案: