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

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

但是，當我按下提交按鈕，它將我帶到了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);

來源

2015-10-28 PHP Scrub

爲什麼不只是讓JavaScript乘以它呢？ – Baruch

你提供的標記中沒有'js-php'類。 –

@Baruch我想了解如何將PHP語句中的echo語句連接到HTML。 –

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

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

$data['work'] = $work; 

$data['bork'] = $bork; 

echo json_encode((object)$data);

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

來源

2015-10-28 15:29:01

只需注意，由於字符串鍵，不需要'（對象）'強制轉換。 –

對於字符串鍵沒有必要，但對我來說，我通常喜歡在編碼之前將它作爲對象使用 –

我想你需要&

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

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

，我更喜歡使用

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

來源

2015-10-28 15:53:17

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

目前，同時使用.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

來源

2015-10-28 17:00:59 Und3rTow

Hello M.Doye，我覺得我正在取得很大進步，但是仍然無法獲得來自PHP的echo消息以HTML格式顯示，就像你在jsfiddle上的例子一樣。這是我到目前爲止所做的：（不太擅長使用jsfiddle） https：// jsfiddle。net/mdoye/gxok5dux/4/ –

@PHPScrub在您的瀏覽器開發者控制檯中使用網絡檢查器，確保請求按照您的預期發送 - 同樣，您需要更新小提琴。（你發佈的是我發佈的同一個） – Und3rTow

我試過了。正在發送請求。但是，無論我嘗試什麼，它都會將我重定向到PHP文件。 –

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

回答

相關問題