2012-01-18 178 views
4

道歉,如果這已經回答過了(當我搜索的檔案我無法找到答案)形式提交使用jQuery

我有受密碼保護的網頁:

<?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:htmldata2的2個引用,則不會發生(事實上,沒有任何反應,所以我假定jQuery將數據提交給表單)。我也將type更改爲'GET',因此在同一頁上的2個POST請求導致問題,但這並未改變結果。

我錯過了什麼從p2.php獲取信息(即data2)並顯示它?

編輯

感謝評論指出一個錯字,我已經改變了dataType: htmldataType: '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中。

+1

當然,它應該是'dataType:'html' '?你想說它的值是字符串'html'而不是名爲'html'的變量的值。 – 2012-01-18 11:48:46

+0

謝謝 - 我編輯的問題反映了這一點! – ChrisW 2012-01-18 11:52:09

+0

從您對發生的事情的描述中,聽起來像默認表單操作正在觸發,而不是您綁定到按鈕的單擊事件的代碼。 – psynnott 2012-01-18 11:53:56

回答

0
$(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作爲您的形式的行動後發送:)

+0

感謝這個建議,我已經嘗試了'.serialize()'和stringing dataString在一起手動(見我編輯的問題;作爲旁邊我已經在p2.php中的代碼實際上並沒有在此使用dataString但是兩者都沒有什麼區別 – ChrisW 2012-01-18 12:12:50

+0

快速修改我的答案,我提出了成功和錯誤的警告(我知道這件事會做得更好),看看是否有任何一場火災,或者更好,看Firebug或Chrome的開發工具來查看htt p請求和任何錯誤 – 2012-01-18 12:26:46

+0

已將我的代碼更改爲您的建議 - 我收到警告「有效!」但服務器的結果仍未顯示! – ChrisW 2012-01-18 22:52:43

0

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

$( '#提交')點擊(函數(E) {

e.preventDefault(); 

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

}); });

+0

_return false_做同樣的事情 – 2012-01-18 11:57:32

0

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

variable1=value1&variable2=varlue2 

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

+0

謝謝 - 我已經編輯了這個問題來反映這個(不幸的是,它沒有任何區別!);另外,p2.php不使用dataString中包含的數據 – ChrisW 2012-01-18 12:18:45

1
 

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; 
    }); 
});