將變量從Javascript/JQuery傳遞到PHP

我還是新來的JQuery，並試圖學習如何提交沒有頁面刷新的表單... 我想要的是，當提交表單時，我所鍵入的值在「標題」和「副標題」可以傳遞到PHP變量（所以我可以附和/插入數據到數據庫等）將變量從Javascript/JQuery傳遞到PHP

於是，我把

"<? echo $_POST['headline']; ?>"

上

<span class="save-notice">Your change has been saved! <? echo $_POST['headline']; ?></span>

但是w如果我填寫表格並點擊提交按鈕，它只會顯示「您的更改已保存！」。這意味着，該變量不能傳遞給PHP。

將HTML和JS合併爲一個文件。我在.ajax上留下了URL方法，因爲它在同一個文件中處理。

HTML表單

<div id="submit-form"> 
<form action="" id="select-block" class="general-form"> 
<div class="input-wrap"> 
    <input class="clearme" name="Headline" value="Your headline here" id="headline"/> 
</div> 
<div class="input-wrap"> 
    <textarea class="clearme" name="Sub-Headline" id="subheadline">Sub Headline Here</textarea> 
</div> 

<input type="submit" class="submit-btn" value="SAVE" /> 
<span class="save-notice">Your change has been saved! <? echo $_POST['headline']; ?></span> 
</form> 
</div>

而jQuery代碼

<script type="text/javascript"> 

$(function() { 
    $(".save-notice").hide(); 
    $(".submit-btn").click(function() { 

    var headline = $("input#headline").val(); 
    var subheadline = $("textarea#subheadline").val(); 
    var dataString = 'headline='+ headline + '&subheadline=' + subheadline; 
    alert(dataString) 


     $(".save-notice").hide(); 
     $.ajax({ 
     type: "POST", 
     url: "", 
     data: dataString, 
     success: function() { 
      $(".save-notice").show(); 
     } 
    }); 
return false; 
    }); 
}); 

</script>

我在幾個例子中看到的/在互聯網上的教程，如果可以這樣做。你能建議嗎？

來源

2012-10-30 Yansen Tan

的問題已經解決。該值可以實際傳遞。並不能在該頁上回顯 –

您的save-notice中的$_POST['headline']是在頁面加載時生成的。 PHP運行並輸出一個HTML文件。

當您發出AJAX請求時，返回到AJAX調用的頁面將包含您的新值，但您的當前頁面不包含。

您可以發佈到不同的頁面，讓該頁面返回一個值，然後使用JavaScript更改div的值。

或者，您可以嘗試從返回的HTML頁面提取數據。

$(".save-notice").hide(); 
$.ajax({ 
    type: "POST", 
    url: "", 
    data: dataString, 
    dataType: 'html', // the page returned 
    success: function(data) { 
     // get the data from the returned page 
     $(".save-notice").html($('.save-notice', data).html()); 
     $(".save-notice").show(); 
    } 
});

來源

2012-10-30 17:59:30

見 http://api.jquery.com/serialize/

而是添加代碼的點擊處理程序

$(".submit-btn").click(function() { ... }

使用提交處理

$("#select-block").submit(function() { 
// your code 
    var dataString = $(this).serialize(); 

});

來源

2012-10-30 18:05:04

您已經在JavaScript變量的值：

var headline = $("input#headline").val(); 
var subheadline = $("textarea#subheadline").val();

你可以做這樣的事情：

$.ajax({ 
    type: "POST", 
    url: "foo.php", 
    data: {headline: headline, subheadline: subheadline}, 
     success: function() { 
      $(".save-notice").show(); 
     } 
});

或像這樣：

$.post("foo.php", { headline: headline, subheadline: subheadline }, 
    function(data) { 
     $(".save-notice").show(); 
    } 
);

你可以看到，數據在鍵值對傳遞： { headline: headline, subheadline: subheadline }

您可以使用$_POST如$_POST['headline']和$_POST['subheadline']

來源

2012-10-30 18:13:41

嗨rkm，我如何獲取要用於PHP變量的數據？ –

我編輯了相同的答案。 – 2012-10-31 06:38:40

使用Firebug的控制檯功能，您可以看到服務器對您的AJAX呼叫的響應。響應正在評估您想要的$ _POST var，但由於AJAX調用發生在幕後，您不會看到它。

爲了讓您的腳本工作沒有太多的修飾，試試這個（沒有PHP是必要的）：

更換<? echo $_POST['headline']; ?>與<span id="yourheadline"><span>
插入$('#yourheadline').html(headline);上線前$(".save-notice").show();

另一件事我會建議序列化你的表單來創建dataString var，而不是通過輸入做輸入。如果您的輸入被命名爲headline和subheadline代替Headline和Sub-Headline ...

var dataString = $("#select-block").serialize();

...將完成同樣的事情：

var headline = $("input#headline").val(); 
var subheadline = $("textarea#subheadline").val(); 
var dataString = 'headline='+ headline + '&subheadline=' + subheadline;

來源

2012-10-30 18:42:16 humbolight

將變量從Javascript/JQuery傳遞到PHP

回答

相關問題