Question

我想创建一个表单，你写一个数字发送它与Jquery并由PHP显示而不刷新页面，到目前为止我有这个代码，但如果放置preventDefault（）它将发布但内容未显示，如果我删除它，内容会显示，但页面将刷新。

使用Javascript：

$('#testut').unbind('submit').bind('submit',function(ev) {
    ev.preventDefault();
    $.ajax({
        type: 'post',
        url: 'incerc.php',
        data: $('form').serialize(),
        success: function () {
            $('.success').fadeIn(500);
        }
    });
});
}

HTML：

Test
<br />
<?php
if(isset($_POST['test'])) {
    $test = $_POST['test'];
    $numar = $_POST['numar'];
    echo 'Order name:'.$test.'<br />Number:'.$numar.'<br />';
} else {
    echo 'No <br />';
}
?>
<div id='testut'>
    <form id='test' method='post'>
        <input type='text' name='numar'><br />
        <input type='submit' name='test' onclick ='check()' value='Place'><br />
        <span class='success' style='display:none'>Order was successfully placed.</span>
    </form>
</div>

Answer 1

如果我理解正确，那么您正在制作动态的ajax请求，并期望您的if(isset($_POST['test']))成功运行。那不行。该PHP代码是静态的，只会运行以构建页面。您需要做的是在收到POST操作的响应后动态构建结果。

表单响应应返回JSON，即：{ orderName: 'test name', numar: 1321321 }

然后你的成功函数看起来像（粗略地）：

function( data ){
  $('.success')
    .html( 'Order name:' + data.orderName + '<br />Number:' + data.numar + '<br />' )
    .fadeIn(500); 
}

Answer 2

不要使用解绑提交和绑定提交，最终没有用，导致默认操作（提交按钮单击时提交表单）不会以这种方式被阻止。

如果你真的试图从另一个php文件（incerc.php）获取数据到你的页面，你需要阻止你的页面被事件处理程序中的preventDefault（）方法重新加载：

  $('#test').on('submit', function(ev){
    ev.preventDefault();
    var form = $(this);
    $.post('incerc.php', form.serialize())
      .done(function(data){
        $("#form_result").html('Number:' + data + '<br />');
      })
      .fail(function(){
        $("#form_result").html('No <br />');
      });
    $('.success').fadeIn(500);
  });

如果没有页面重新加载，您只能将$ .post ajax调用的响应插入到页面的某些DOM元素（在我的示例中为#form_result），以显示它。这是我的例子的HTML：

<div id="form_result"></div>
<div id='testut'>
  <form id='test' method='post'>
  <input type='text' name='numar'><br />
  <input type='submit' name='test' value='Place'><br />
  <span class='success' style='display:none'>Order was successfully placed.</span>
  </form>
</div>

然后你不需要传递$ _POST [＆＃39; test＆＃39;] - 提交按钮的值 - 在ajax调用incerc.php中，＆＃39;因为它可以简单在DOM中找到。

但是，如果您尝试从您的同一页面获取数据，则需要在开始时使用正确的ajax响应实现：

if(isset($_POST['test']))
{
  $test = $_POST['test'];
  $numar = $_POST['numar'];
  echo 'Order name:'.$test.'<br />Number:'.$numar.'<br />';
  die();
}
...

Answer 3

我想在php之后执行查询，该示例仅用于测试，所以我设法做到这一点（例如）。

使用Javascript：

function check(){
$("#test").submit(function(e)
{   var numar = $('#numar').val();
    var test = $('#testim').val();
    var dataString = 'numar='+ numar + '&test=' + test;

    $.ajax(
    {
        url : 'incerc.php',
        type: "POST",
        data : dataString,
        success:function(data, textStatus, jqXHR) 
        {
            $('.success').fadeIn(500);
            $('body').load('incerc.php?'+dataString);
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            $('.success').html("Nu a mers");     
        }
    });
    e.preventDefault(); 
    e.unbind(); 
});

}

HTML：

<?php if(isset($_GET['test'])){
$test = $_GET['numar'];
$numar = $_GET['numar'];
echo 'Order name:'.$test.'<br />Number:'.$numar.'<br />';}
else{echo 'No <br />';} ?>
<div id='testut'>
<form name='test' id='test' method='POST'>
<input type='text' id='numar' name='numar'><br />
<input type='submit' id='testim' name='test' onclick ='check()' value='Place'><br />
<span class='success' style='display:none'>Order was successfully placed.</span>
</form>

所以现在身体会在数据成功发送时加载，并且会正确得到结果，同样在地址栏中它仍会显示'incerc.php'而不是'incerc.php？'+ dataString。

如果发出防止故障，Jquery不会发布POST

3 个答案: