jquery ajax表单提交

Posted 2023-05-08

【中文标题】jquery ajax表单提交

【英文标题】：jquery ajax form submit

【发布时间】：2012-04-05 01:18:46

【问题描述】：

这段代码正确吗？我正在尝试提交它，如果文本区域再次为空，我也想提交。

<script type="text/javascript">
$(document).ready(function()

    $("form#submit").submit(function() 
        // we want to store the values from the form input box, then send via ajax below
        var fid = $(".messag").attr("id");
        var val = $("#mess_ar").val();
        $.ajax(
            type: "POST",
            url: "send_message.php",
            data: "fid="+ fid +"&val="+ val,
            success: function()
                    $("#mess_ar").
            
        );
        return false;
    );
):
</script>

我正在尝试上传这个：

<form id="submit" method="POST">
<textarea name="mess_cont" id="mess_ar" autofocus="autofocus" cols="70" rows="5">      </textarea>
<button id="mess_but" type="submit">Send</button>
</form>

谢谢...

【问题讨论】：

你可能需要像$("form#submit").submit(function(e) 这样在你的事件捕获函数中添加一个参数，然后你可以使用e.preventDefault()来停止默认操作，提交，发生

@ianbarker 返回 false；已经在最后使用了。

您发布的 html 中没有任何内容具有“messag”类，因此尝试设置“fid”的行会将其设置为null。 “成功”功能显然不完整；你想只调用.val('') 来清除文本区域吗？

@TJ。我错过了，但是我认为preventDefault() 是使用 jQuery 时的首选方法

.messag 是此表单中的元素

【参考方案1】：

看起来不错。要清空文本区域，请在 ajax 成功回调中使用以下内容：

$("#mess_ar").val('');

【参考方案2】：

​$(function()
    $("form#submit").submit(function(e)
        e.preventDefault();
        var fid = $(".messag").attr("id");
        var val = $("#mess_ar").val();
        $.ajax(
            type: "POST",
            url: "send_message.php",
            data: "fid="+ fid +"&val="+ val,
            success: function()
                $("#mess_ar").val("");
            
        );
    );
);​

使用

$("#submit").on('submit', function(e)...);

而不是

$("#submit").submit(function(e)...);

如果您使用的是最新版本的 jquery。

【讨论】：

为什么提交时会重新加载整个页面？

你添加了e.preventDefault()吗，请看这个jsfiddle.net/GkCbD/2

【参考方案3】：

您真正在寻找什么？它是否也返回数据作为响应？添加功能以跟踪您的错误案例。制作类似的东西

<script type="text/javascript">
$(document).ready(function()

    $("form#submit").submit(function() 
       // we want to store the values from the form input box, then send via ajax below
       var fid = $(".messag").attr("id");
       var val = $("#mess_ar").val();
       $.ajax(
          type: "POST",
          url: "send_message.php",
          data: "fid="+ fid +"&val="+ val,
          success: function(incoming_data)
             // ALERT incoming data if coming
             $("#mess_ar").text(""); // DO YOUR JOB CONTINUOU
          ,
          error: function()  
             alert("BROKEN REQUEST.");
          
       );
       return false;
   );

);
</script>

否则，看起来一切都很好。

【讨论】：

我应该能够在我的 php 文件行正常 $_POST[''] 中接收它们？

是的，当您从 ajax 传递参数时 ` 数据： "fid="+ fid +"&val="+ val` 所以它们可以通过$_POST['fid'] 和 '$_POST 在 php 中访问['val']'。但是，错误以客户端错误对象的形式出现。所以，如果你想传递到 php 服务器端，你需要制作另一个可以传递错误对象的罐子！