如果放置了 preventdefault，Jquery 不会 POST - Jquery won't POST if preventdefault is placed

我想制作一个表单，您可以在其中写一个数字，并使用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>

如果我理解正确，您正在发出动态 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); 
}

不要使用取消绑定提交和绑定提交，最终它是没有用的，因为默认操作（单击提交按钮时提交表单）不会以这种方式被阻止。

如果你真的试图从另一个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>

然后，您不需要在ajax调用中将$_POST['test']-提交按钮的值传递给incerc.php，因为它可以在DOM中找到。

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

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

我想

在 php 中的 POST 之后执行查询，该示例仅用于测试，所以我设法这样做（例如）。

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？+数据字符串。