Question

我有一个带图像输入类型的表单：

<form data-ajax="false" method="post" name="login_form" role="form">
   <div class="form-group">
      <input type="image" src ="images/internetimyok.png" class="img-responsive center-block" name="submit" value="Invite" class="submitBtn" id="resim"></input>
   </div>
</form>

它做什么，当用户只是点击它时，它会向我发送通知电子邮件。这是jQuery部分，它处理发送电子邮件和更改图像;

$('form').bind('submit', function() {

    var ret = false;
    $.ajax({
        type: 'POST',
        url: 'includes/mailgonder.php',
        data: $(this).serialize(),
        cache: false,
        dataType: 'text',
        success: function(data, status, xhttp) {
            // data will be true or false if you returned a json bool
            ret = data;
            alert('Gonderildi');
            // change image after success call (DOESN'T WORK)
            $('#input').attr("src", "newURL");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('Mail gönderilemedi, lütfen daha sonra tekrar deneyin.\nMail could not be sent, please try again later.');
        },
        async: false // this is generally bad, it will lock up your browser while it returns, but the only way to fit it into your pattern.

    });
    return ret;
})

当我尝试在$('#input').attr("src", "newURL");事件上使用onClick()进行测试时，它可以正常运行。但我无法让它在jQuery上运行。

旁注：当我在onClick()

上试用时，它会重新加载表单并将图片更改为默认值

有没有简单的方法可以在成功通话后更改图像？

Answer 1

有几个问题：

您的图片输入id为resim，而不是input：

<input type="image" ... id="resim">
<!-- -------------------^^^^^^^^^^ -->

所以：

$('#resim').attr("src", "newURL");

您将ret设置为data，这将是一个字符串，因为这就是您告诉它的内容（dataType: 'text' ）。因此，如果ajax调用有效，你将永远不会返回false，你将返回一些字符串;表格提交将继续进行，因为您尚未取消。由于您正在提交表单，因此该页面将被拆除并替换为服务器中的新加载版本 - 当然，该版本将具有用于图像输入的原始src。

如果您希望阻止表单提交，请返回false，而不是字符串。如果您在提交表单后想要在图像上使用不同的src，请执行该服务器端。

旁注：</input>永远无效。 input元素是无效元素，因此在HTML中，它们只是简单地写成<input ...>（尽管<input .../>是可以容忍的）。在XHTML中，它们是<input.../>。但绝不是<input></input>。

附注2：在您对服务器执行POST操作之前，我没有看到表单提交等待的任何意义，然后一旦POST完成，请将表单...提交到您的服务器。让你的服务器在表单提交上完成两项工作（如果第一件事不起作用，那就不做第二件事，如果这是你想要发生的事情）。使用同步ajax请求是可怕的用户体验，如果可能的话应该避免使用。

只要您不尝试将表单提交到其他窗口，就可以通过取消用户的表单提交，进行电子邮件ajax调用，然后以编程方式提交表单来避免使用async: false完成后，请参阅***和TODO评论：

$('form').bind('submit', function() {

    // TODO: Probably worth disabling the submit button here...

    var form = this; // Use `this`, NOT `$(this)`!
    $.ajax({
        type: 'POST',
        url: 'includes/mailgonder.php',
        data: $(this).serialize(),
        cache: false,
        dataType: 'text',
        success: function(data, status, xhttp) {
            // change image after success call
            $('#resim').attr("src", "newURL");

            // *** Submit the form - because you're calling it directly on the DOM
            // element, it won't re-trigger the submit handler
            form.submit();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('Mail gönderilemedi, lütfen daha sonra tekrar deneyin.\nMail could not be sent, please try again later.');

            // TODO: If you disabled the submit button earlier, enable it again
        }
        // *** Yay, no `async: false` anymore
    });

    // *** Always cancel user's form submission, we'll do it for them above
    return false;
})

成功通话后无法更改按钮的图像

1 个答案: