Question

我有以下提交处理程序，它应该根据用户输入（键）查找某个值，并在提交表单之前用提取的值更新隐藏字段。

$('#my_form').submit(function() {
  $.ajax({
    url: "lookup.php?key=" + $('#key').val(),", // Read one of the user input and lookup
    dataType: 'json',
    success: function(data){
     console.log(data); // Shows the expected result
     $('#my_form').find('input[name="xxx"]').val(data); // Substitute the hidden xxx with the fetched data
     return true;
    }
  });
  console.log($('#my_form').find('input[name="xxx"]')); // Still the old value here
  return true;
});

不幸的是，最终提交的表单似乎包含旧值，如console.log中所示。鉴于我对JS很新，我想我在这里缺少一些非常基本的东西。

Answer 1

您进行异步调用，并在从ajax调用收到结果之前调用console.log。所以你的输入改变了，但输出时没有改变。您可以向async:false添加$.ajax选项，然后选中console.log - 它会输出更改后的值

Answer 2

Hej ajax调用是异步的，所以在提交表单之前它不会返回并更新你的代码。

您需要做的是拒绝提交表格并在提交时提交 ajax调用返回。

！更新以防止inf循环

$('#my_form').submit(function(e) {
 if($(this).find('input[name="xxx"]').val() === "") { // assuming its the default
  e.preventDefault();
  $.ajax({
    url: "lookup.php?key=" + $('#key').val(),
    dataType: 'json',
    success: function(data){
     $('#my_form')
      .find('input[name="xxx"]').val(data).end()
      .submit();
    }
  });
  return false;
 } else {
  return true;
 }
});

Answer 3

$('#my_form').submit(function(e, skipAjax) {
    if(typeof(skipAjax) == 'undefined') {
        $.ajax({
            url: "lookup.php?key=" + $('#key').val(),
            dataType: 'json',
            success: function(data){
            $('#my_form')
               .find('input[name="xxx"]').val(data).end()
               .submit('skipAjax');
            }
        });
        return false;
    } else {
         return true;
    }
});

在提交具有通过Ajax获取的某个值的表单之前替换输入隐藏值

3 个答案: