JQuery ajax调用重置所有表单字段

Question

我一直在使用验证码在我的网站上开发联系表格。 这里可以看到一个例子：

联系表

几年前，如果用户需要重新加载验证码图像，那么我唯一的选择是重新加载整个表单。

由于我开始使用jquery，现在是时候用一个只刷新图像的方法替换它。

所以我写了这个小片段：

$(document).ready(function() {
    $('#creload').click(function() {
        $.ajax({
            type: "POST",
            url: "/en/KDpg_Captcha.html",
            async: true,
            success: function(ret) {
                $('#cimg').attr('src', ret);
            }
        });
    });
});​

其中#creload是请求重新加载的链接的id，而#cimg是实际图像的id。

我发现如果一个填写其他表单字段然后请求重新加载，其他字段将被重置。 这不是期望的结果。

我能错过什么？

Answer 1

如果#creload是一个链接，你需要阻止它执行默认操作，即打开href属性中的内容。 添加e.preventDefault（）会停止此操作。 不要忘记添加e作为参数：

$('#creload').click(function(e) {
    e.preventDefault();
    // ...

Answer 2

当您单击以下链接时：

<a href id="creload">here</a>

当前页面被解释为href并重新加载页面。

您可以通过向TJ描述的click处理程序添加function(e)和e.preventDefault() ，或者更简单地通过将链接更改为：来以编程方式阻止此操作：

<a href="#" id="creload">here</a>

或者，如果您不希望#链接将访问者带到页面顶部：

<a href="javascript:" id="creload">here</a>