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

但是，单击submit然后将表单发送到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; 
  });
});

Answer 2

我认为您必须阻止表单的默认操作。试试这个：

$（＆＃39;＃提交＆＃39）。单击（函数（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

我还认为你可以删除dataType属性。

Answer 4

$(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）您希望在ajax成功调用中作为“data2”返回的内容。

<强>更新

由于您的Ajax请求成功触发，这意味着您的帖子未正确传递，或者您没有输出任何内容。我重新查看了你的代码，我看到了这个：

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

这意味着您正在获取错误的 $ _POST变量！

这样做：

由于您要发送名称=“input1”，请在p2.php中尝试：

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

在你的jquery成功中：

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

如果按照字面意思进行操作，那就完成了。在遥远的可能性它将无法工作，忘记AJAX，删除JavaScript并做一个正常的帖子提交与p2.php作为您的表格的行动：）

使用jQuery提交表单

4 个答案: