使用$ .post（）jQuery方法進行按鈕單擊事件

Question

我有一個微型Web應用程序，當用戶與頁面進行交互時，該應用程序會填充JavaScript對象的內容。 我已經將on('click', function() {})事件處理程序添加到頁面上的按鈕元素。

我想在事件處理程序中使用$.post方法將JavaScript對象發布/提交到PHP后端，並使用從PHP服務器/腳本接收的數據/消息異步更新'Div'元素。

console.log驗證JavaScript對象是否正常，但我什至無法從PHP腳本收到“ Hello World”字符串，更不用說處理JavaScript對象了。

這是我的代碼：

HTML：

<button id="sbButton" type="button">Submit </button> <div id="output"></div>`

JS：

$(function() { 
    // populates name:value pairs as user interacts on the web page 
    var vInfo = {}; 
    $('#sbButton').on('click', function() { 

        $.post('http://localhost/ReceptionVisitorKiosk/response.php'‌, vInfo, function(data) { 
            console.log("Response Info " + data); 
            $('#output').text(data); 
        }); 
    });
}

PHP：按照kyshel和robert的建議進行了嘗試，都沒有幫助。

Answer 1

您必須先檢查以下內容：

JavaScript有語法錯誤嗎？ （檢查控制台）
您的PHP是否存在語法或邏輯錯誤？（例如：在CentOS 7，輸入命令#tail -f /var/log/httpd/error_log ）

如果沒有錯誤，請嘗試下面的代碼，它可以在我的服務器上正常工作：

例

index.html

<button id="foo">Click</button>
<div id="receive"></div>

<script type="text/javascript">
function runPost(){
    var object_a={name:"mike",sex:"male"};

    $.post("post.php", object_a, function(result){
        $("#receive").html(result);
    });
}


$("#foo").click(function() {
  runPost(); 
});
</script>

post.php

<?php
echo '<pre>' . var_export($_POST, true) . '</pre>';

echo "hello,world~";

結果：

Answer 2

嘗試以下代碼段：

var objectToSend = {name:"Some Name", lastName:"Some last name"};
    $.post('url_to_php.php', objectToSend , function(response){
       console.log(response);
    });

在php中訪問變量。

$name = $_POST["name"];
$lastName = $_POST["lastName"];
$data = //some object you are returning
header('Content-Type: application/json');
echo json_encode($data);

編輯：

我已經在http://phpfiddle.org/上測試了以下代碼段。 我無法保存它，因為它需要注冊，但是您可以重新粘貼它。

<?php
if(isset($_POST["name"]))
{
    $name = $_POST["name"];
    $data = "Thank you $name";
    header('Content-Type: application/json');
    echo json_encode($data); 
    return false;
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>
            PhpFiddle Initial Code
        </title>
        <script type="text/javascript" src="/js/jquery/1.7.2/jquery.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div style="margin: 50px 10%;">
            <button id="mybutton" type="button">Click to See</button>
        </div>
        <script>
            $("#mybutton").click(function() {
                // myurl can be an URL or PhpFiddle API, fopr example, 
                //var myurl = "http://main.xfiddle.com/<?php echo pf_file('jh2-qj7'); ?>";
                //console.log(myurl);
                var dataToSend = {name : "Robert"};
                $.post(window.location.href, dataToSend , function(response){
                    alert(response);
                });
            });
        </script>
    </body>
</html>

使用$ .post（）jQuery方法進行按鈕單擊事件

問題描述

2 個解決方案

解決方案1
1 2016-08-31 08:44:51

您必須先檢查以下內容：

例

解決方案2
0 已采納 2016-08-31 06:58:34

使用$ .post（）jQuery方法進行按鈕單擊事件

問題描述

2 個解決方案

解決方案1 1 2016-08-31 08:44:51

您必須先檢查以下內容：

例

解決方案2 0 已采納 2016-08-31 06:58:34

解決方案1
1 2016-08-31 08:44:51

解決方案2
0 已采納 2016-08-31 06:58:34