php - 使用 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?input1=test(即，数据字符串被发送到 p1.php，而不是 p2.php)。如果我编辑代码并删除 dataType:html 和 data2 的 2 个引用，那么这不会发生(事实上，什么也没有发生，所以我假设 jQuery 正在提交数据到表格)。我还将 type 更改为“GET”，以防同一页面上的 2 个 POST 请求导致问题，但这并没有改变结果。

要从 p2.php(即 data2)获取信息并显示它，我缺少什么？!

编辑

感谢指出错字的评论，我已将 dataType: html 更改为 dataType: 'html' - 现在这不会导致页面重定向到 p1.php?input1=test，但再一次，它什么也没做(当它仍然应该返回 data2 的值时)

编辑 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

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