在ajax cal之前显示模态表单并从中获取数据

时间:2017-05-22 12:02:18

标签: javascript jquery ajax

我有一个像这样的ajax函数:

 function foo(e, e1, curc)
 {
    var sender = (e && e.target) || (window.event && window.event.srcElement);

    $.ajax({
        type: 'POST',
        url: 'script.php',
        dataType: 'json',
        data: "id="+e+"&mod="+e1+"&curc="+curc, 
        beforeSend: function() {
            $('#mform').show();             
        },
        complete: function() {
            $('#fountainG').hide();
        }, 
        success: function(data) {
            document.getElementById("itog").innerHTML = data.d+data.a;
        },
        error: function(xhr) {
            document.getElementById("itog").innerHTML = '123';
        }    
    });
}

我需要向用户显示一些模态表单,并在ajax脚本中从中获取数据。我试图将show函数添加到ajax beforeSend - 但我不明白如何等待用户表单提交,并从模态表单获取数据。 Ajax函数调用html:href="javascript:void(0)" onclick="javascript:foo(3800064420557,1,138)

2 个答案:

答案 0 :(得分:2)

你只需要重新安排你的逻辑。而不是试图在ajax请求中“显示”模态,推迟发送ajax请求,直到从模态获得必要的数据。这是一个粗略的轮廓,假设您的模态元素function foo(e, e1, curc) { var sender = (e && e.target) || (window.event && window.event.srcElement); var modal = $('#mform'); var form = $('#myform', modal); form.on( 'submit', function(){ $('mform').hide(); // make your ajax call here the same way, and inside the // onsuccess for this ajax call you will then have access to both // the results of your ajax call and the results of the form // data from your modal. $.ajax({ ... }); }); } 中有一个表单,其中包含您想要从中获取数据的形式。

import { computedFrom } from 'aurelia-framework';

export class MyClass {

  @computedFrom('propX', 'propY') //update this property whenever propX or propY change
  get myComputedProp() {
    //do your magic here!
    return this.propX + this.propY;
  }

}

答案 1 :(得分:1)

要获取表单数据,您可以尝试使用以下代码

function foo(e, e1, curc)
 {
    var sender = (e && e.target) || (window.event && window.event.srcElement);
   form_values = {}
   $('mform').show();
   $('#myForm').submit(function() {
   var $inputs = $('#myForm :input');
       $inputs.each(function() {
       form_values[this.name] = $(this).val();
   }); 
   console.log("form data:", form_values)
   // with form_values continue with your coding   
    $.ajax({
        type: 'POST',
        url: 'script.php',
        dataType: 'json',
        data: "id="+e+"&mod="+e1+"&curc="+curc, 
        success: function(data) {
            $('mform').show();
            document.getElementById("itog").innerHTML = data.d+data.a;
        },
        error: function(xhr) {
            document.getElementById("itog").innerHTML = '123';
        }    
    });
  });
}

希望它会对你有所帮助:)。