使用Ajax和JSON在HTML中顯示PHP回顯消息

Question

我一直試圖使用Javascript/jQuery和json將我的PHP文件連接到我的HTML文件。當用戶在表單的輸入框中輸入數字並提交時，PHP文件應該將數字乘以2並將其發回給用戶。

但是，當我按下提交按鈕，它將我帶到了PHP頁面，而不是在HTML中顯示信息（在PHP文件中處理）。

這是我的HTML表單：

<div id="formdiv"> 
    <form action="phpfile.php" method="get" name="form1" id="form1" class="js-php"> 
    Mata in ett nummer: <input id="fill1" name="fill1" type="text" /> 
    <input type="submit" id="submit1" name="submit1" value="submit"> 
</form> 

這是我的JavaScript文件

$(".js-php").submit(function(e){ 

    var data = { 
     "fill1" 
    }; 
    data = $(this).serialize() + $.param(data); 

    $.ajax({ 
     type:"GET", 
     datatype:"json", 
     url:"phpfile.php", 
     data: data, 
     success: function (data){ 
      $("#formdiv").append("Your input: "+data) 
      alert (data); 
     } 
    }) 

    e.preventDefault(); 
}); 

PHP文件：

$kvantitet = $_GET['fill1']; 
$y = 2; 
$work = $kvantitet * $y; 
$bork = $work * $kvantitet; 
echo json_encode($work) ."<br>"; 
echo json_encode($bork); 

Answer 1

你期待JSON數據，但你送回去的是不是JSON

嘗試輸出在你的PHP文件如下：

$data['work'] = $work; 

$data['bork'] = $bork; 

echo json_encode((object)$data); 

使用的console.log檢查輸入數據的AJAX調用，然後根據你想怎麼處理它。

Answer 2

我想你需要&

data = $(this).serialize()+'&'+$.param(data); 

，並在評論中提到@leonardo_palma也許你需要使用e.preventDefault();在年初提交功能

，我更喜歡使用

$(document).on('submit','.js-php',function(){/*code here*/}); 

Answer 3

有幾件事你可以做一些不同的事情來完成這項工作：

目前，同時使用.serialize和$.param您data變量包含這樣的事情：

someurl.php?fill1=1&0=f&1=i&2=l&3=l&4=1&5=%3D&6=1 

如果你只使用.serialize你會得到的東西更容易使用：

?fill1=5 

---

在PHP方面，目前您的代碼輸出 something like this：

4<br>8 

通過添加值到一個數組，你可以得到響應，你可以工作與：

$result = array(); 
$kvantitet = $_GET['fill1']; // Lets say this is 5 
$y   = 2; 
$work  = $kvantitet * $y; 
$bork  = $work * $kvantitet; 

//add the values to the $result array 
$result = array(
    "work" => $work, 
    "bork" => $bork 
); 

echo json_encode($result); 

Which will output：

{"work":4,"bork":8} 

---

返回的JS方可以再處理數據在您的成功回調中：

$(".js-php").submit(function(e){ 
    data = $(this).serialize(); 
    $.ajax({ 
     type:"GET", 
     datatype:"json", 
     url:"phpfile.php", 
     data: data, 
     success: function (data){ 
      // *data* is an object - {"work":4,"bork":8} 
      $("#formdiv").append("Your input: "+data) 
      console(data); 
     } 
    }); 
    // Use return false to prevent default form submission 
    return false; 
}); 

單程acc ESS在對象的屬性是通過使用點符號：

data.work //Outputs 4 
data.bork //Outputs 8 

上處理

但是here is a really great answer /訪問使用JavaScript對象和數組。

Here is a Fiddle包含你的（工作）jQuery