Question

我已经检查了这个答案但是所有问题都是同一个标题（防止随机重复标记）。这是对点击过滤器按钮的ajax调用，该按钮应将以 formmatcat 格式插入的数据发送到php文件 formfilt.php 并应将结果加载到ID为 resultins

的div中

<script>
  $(function () {
    $('#filter').on('click', function(event){
        event.preventDefault();
        $.ajax({
            type: 'post',
            url: 'formfilt.php',
            data: $('#formmatcat').serialize(),
            success: function () {        
                $("#resultins").load('formfilt.php');
            }
      });
    });
  });
</script>

我将preventdefault设置为仅在div中加载而不重定向到php文件，这可行但如果我放preventDefault它通过连接从表单发送的值来回显我构建的字符串那些空值。奇怪的是，如果我删除preventDefault当然它会重定向并加载php文件但是具有正确的值：

故事的道德，带有ajax调用的表单中的数据正确地转到php文件，但看起来像preventDefault不要这样。提前致谢

这里是带有

形式的html部分的结构

<form id="formmatcat" method="post" action="formfilt.php">  
.
.
various textboxes
.
.
</form>

Answer 1

您正在做的是向formfilt.php发送AJAX请求，当此调用发生并返回响应时，它将作为参数存储在success或$.done函数中正如我稍后会提到的那样，这就是你的echo d内容。

您在此处所做的是，当通话成功时，您只需向同一页面发送GET请求即可。由于GET请求与AJAX POST请求不同，并且没有POST参数，因此您无法获得正确的输出。

当您致电load时，只需提交表单并让其转到页面而不是取消请求即可获得正确的值，因为您直接发布到具有正确值的页面函数你正在做一个单独的AJAX get请求。

实际上load是$.get的粗略等同物，它是$.ajax的简写。

Looking at jQuery AJAX docs

jqXHR.done（function（data，textStatus，jqXHR）{}）; 成功回调选项的替代构造，.done（）方法替换了不推荐使用的jqXHR.success（）方法。有关实现的详细信息，请参阅deferred.done（）。

基本上，$.ajax()调用会返回一个promise对象，您可以在完成后链接回调。另请注意，此处的data将是PHP文件中的实际内容，因此如果您重写AJAX调用，请执行以下操作：

<script type="text/javascript">
    $(function() {
        $('#filter').on('click', function(e) {
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: 'formfilt.php',
                data: $('#formmatcat').serialize()
            }).done(function(data) {
                $('#resultins').html(data);
            });
        });
    });
</script>

然后，它会继续将formfilt.php的输出加载到ID为resultins的div中。

Answer 2

不要使用表单，使用没有表单的输入，并使用按钮标签使用onclick运行功能，如果你使用表单，它将提交和重定向，我对jQuery的ajax不太满意但如果我要使用javascript / XHR

var CB=document.getElementById("filter").value; //get input/filter value
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200)
        document.getElementById('contain').innerHTML=xhttp.responseText;
  };
var url="formfilt.php?filter="+CB;
xhttp.open("GET", url, true);
xhttp.send();

如果你想使用post：

xhttp.open("POST", "formfilt.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send('filter='+CB);

抱歉，我也在学习，而且刚刚学习，只是在一周前学习，

Event.prevent（）默认ajax不将数据从表单发送到php

2 个答案: