2012-01-18 177 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; 
    }); 
});