使用Javascript - 根据Ajax响应停止表单提交表单、根据、Javascript、Ajax

2023-09-12 21:15:58 作者:性格坦荡不讨喜

我想用AJAX来确定表单的值是否是我接受(这不是形成验证)。阿贾克斯结果将决定是否提交表单或没有。

下面,你会看到,我执行一个AJAX调用时的形式提交,并根据返回什么(无论是空白这是可以接受的,或者是不能接受的错误消息),我想返回true; 返回false; $(形式)提交

我怀疑我的麻烦是在AJAX的成功:。请帮我把结果出AJAX调用,这样我可以这样做如果(结果==){返回true; }其他{返回false; }

工作

  $(形式)。递交(函数(五){
    即preventDefault();
    VAR形式=这一点;
    VAR托盘= $('选择[名称= tray_id])VAL()。
    $阿贾克斯({
        键入:POST,
        网址:模块/储备check.php
        数据:{tray_id:盘},
        缓存:假的
    })。完成(功能(结果){
        如果(结果==)
            form.submit();
        其他
            警报(结果);
    }),失败(函数(){
        警报(错误);
    });
});
 

原文:

  $(形式)。递交(函数(){
    VAR托盘= $('选择[名称= tray_id])VAL()。
    $阿贾克斯({
        键入:POST,
        网址:模块/储备check.php
        数据:{tray_id:盘},
        缓存:假的,
        成功:函数(结果){
                警报(结果);
        },
        错误:函数(结果){
            警报(结果); //这个工作正常(空白,如果可以接受的错误味精如果不接受)
        }
    });

    / *
    如果(结果==)
        返回true;
    其他
        返回false;
    * /
    返回false; //这是这里的调试,只是为了阻止表单提交
});
 

解决方案

由于Ajax调用是异步的,你必须prevent提交表单,然后当返回一个结果,你检查它是否匹配条件和本地提交处理程序提交表单,避免了 preventDefault()在jQuery的事件处理程序:

  $(形式)。递交(函数(五){
    即preventDefault();

    无功自我=这一点,
        托盘= $('选择[名称= tray_id])VAL()。
    $阿贾克斯({
        键入:POST,
        网址:模块/储备check.php
        数据:{tray_id:盘},
        缓存:假的
    })。完成(功能(结果){
        如果(结果==)self.submit();
    }),失败(函数(){
        警报('错误');
    });
});
 
JavaScript Element元素对象

I'm wanting to use AJAX to determine whether or not a form's values are acceptable to me (this is not form validation). The AJAX result will determine if the form is submitted or not.

Below, you'll see that I perform an AJAX call when the form is submitted and depending what is returned (either blank which is acceptable, or an error message which is not acceptable), I'd like to return true; or return false; the $("form").submit.

I suspect my trouble to be in the AJAX's success:. Please help me get the result out of the AJAX call so that I can do something like if (result == "") { return true; } else { return false; }.

WORKING:

$("form").submit(function(e) {
    e.preventDefault();
    var form = this;
    var tray = $('select[name=tray_id]').val();
    $.ajax({
        type: "POST",
        url: "modules/reserve-check.php",
        data: {tray_id: tray},
        cache: false
    }).done(function(result) {
        if (result == "")
            form.submit();
        else
            alert(result);
    }).fail(function() {
        alert('ERROR');
    });
});

ORIGINAL:

$("form").submit(function() {
    var tray = $('select[name=tray_id]').val();
    $.ajax({
        type: "POST",
        url: "modules/reserve-check.php",
        data: {tray_id: tray},
        cache: false,
        success: function(result) {
                alert(result);
        },
        error: function(result) {
            alert(result); //This works as expected (blank if acceptable and error msg if not acceptable)
        }
    });

    /*
    if (result == "")
        return true; 
    else
        return false; 
    */
    return false; //this is here for debugging, just to stop the form submission
});

解决方案

As the ajax call is asynchronous, you have to prevent the form from submitting, and then when a result is returned, you check if it matches the condition and submit the form with the native submit handler, avoiding the preventDefault() in the jQuery event handler :

$("form").submit(function(e) {
    e.preventDefault();

    var self = this,
        tray = $('select[name=tray_id]').val();
    $.ajax({
        type: "POST",
        url: "modules/reserve-check.php",
        data: {tray_id: tray},
        cache: false
    }).done(function(result) {
        if (result == "") self.submit();
    }).fail(function() {
        alert('error');
    });
});