形式提交使用jQuery

Question

道歉，如果這已經回答過了（當我搜索的檔案我無法找到答案）

我有受密碼保護的網頁：

<?php 

if($_POST['pw'] == 'pw') 
{ 
    //Page content 
} else 
{ 
    //Display password form 
} 
?> 

在該頁面的內容，我有另一種形式，這是我想使用jQuery提交，並有下面的代碼：

<script type='text/javascript'> 

    var dataString = $('input#input1').val(); 

    $(function() { 

    $('#submit').click(function() 
    { 
    $.ajax({ 
     type: 'POST', 
     url: 'p2.php', 
     data: dataString, 
     dataType: html, 
     success: function(data2) { 
     $('#testResult').html(data2); 
     } 
    }); 
    return false; 
    }); 
}); 

</script> 

<form name='form1' id='form1' action=''> 
    <fieldset> 
    <label for='input1' id='input1_label'>Input 1</label> 
    <input type='text' name='input1' id='input1' size='30' /> 

    <input type='submit' value='Update/reset' id='submit' class='buttons' /> 
    </fieldset> 
</form> 

<div id='#testResult'></div>; 

然而，點擊提交，然後發送到p1.php形式輸入1 =測試（即數據字符串正在發送到p1.php，而不是p2.php）。如果我編輯代碼並刪除dataType:html和data2的2個引用，則不會發生（事實上，沒有任何反應，所以我假定jQuery將數據提交給表單）。我也將type更改爲'GET'，因此在同一頁上的2個POST請求導致問題，但這並未改變結果。

我錯過了什麼從p2.php獲取信息（即data2）並顯示它？

編輯

感謝評論指出一個錯字，我已經改變了dataType: html到dataType: 'html' - 這個現在不會導致頁面重定向到p1.php輸入1 =測試，但再次？ ，它不會做任何事情（當它仍然應該返回的data2值）

EDIT 2

我已經更新代碼，以便dataString現在是：

var dataString = $('input#input1').val(); 
dataString = 'var1='+dataString; 

但是這並沒有什麼不同

爲了澄清，我只是p2.php包含以下內容：

<?php 

    echo "<p>HELLO!</p>"; 

?> 

編輯3

我所做的更改我的代碼由Damien在下面提出;我收到「作品」的警報！但似乎沒有任何東西從p2.php返回，並且沒有任何內容插入到#testResult div中。

Answer 1

$(function() { 
    $('#submit').click(function() 
    { 
    var dataString = $('#form1').serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'p2.php', 
     data: dataString, 
     success: function(data2) { 
     alert('works!'); // ADDED AFTER UPDATE 
     $('#testResult').html(data2); 
     }, 
     /* ADDED AFTER UPDATE */ 
     error:function(obj,status,error) 
     { 
     alert(error); 
     } 
    }); 
    return false; 
    }); 
}); 

編輯： 在p2.php：

<?php 
var_dump($_POST['pw']); 
?> 

在p2.php然後需要輸出（使用echo，例如）要作爲返回什麼'data2'在你的ajax成功調用中。

UPDATE：

既然你是Ajax請求大火成功地，這意味着無論您的文章沒有正確傳遞，或者你沒有任何輸出。我重新看了你的代碼，我看到了這一點：

<input type='text' name='input1' id='input1' size='30' /> 

，這意味着您要提取的錯誤 $ _ POST變量！

這樣做：

1. 既然你發送一個NAME = 「輸入1」，在你的p2.php嘗試：

   <?php 
   if(isset($_POST['input1']) 
   { 
   echo $_POST['input1']; 
   } 
   else 
   { 
   echo 'No post variable!'; 
   } 
   

   而在你的jQuery的成功：

   success: function(data2) { 
        alert(data2); 
        $('#testResult').html(data2); 
       }, 
   

2. 即使工作，如果你按照字面意思。在遙遠的可能性，它不會工作，忘記AJAX，刪除JavaScript，並做一個正常的提交與p2.php作爲您的形式的行動後發送:)

Answer 2

我想你必須防止窗體的默認動作。 試試這個：

$（ '＃提交'）點擊（函數（E） {

e.preventDefault(); 

$.ajax({ 
    type: 'POST', 
    url: 'p2.php', 
    data: dataString, 
    dataType: html, 
    success: function(data2) { 
    $('#testResult').html(data2); 
    } 
}); 
return false; 

}）; }）;

Answer 3

數據的格式應該是這樣的：

variable1=value1&variable2=varlue2 

我還以爲你可以刪除數據類型屬性。

Answer 4

 

var dataString = $('input#input1').val(); 

    $(function() { 

    $('#submit').click(function(evt) 
    { 
    evt.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: 'p2.php', 
     data: "someval="+dataString, 
     dataType: 'html', 
     success: function(data2) { 
     $('#testResult').html(data2); 
     } 
    }); 
    return false; 
    }); 
});