在API调用AJAX之前等待表单提交

时间:2017-11-07 08:26:36

标签: javascript jquery ajax

解决方案:无需查找PHP变量,只需阻止默认提交并在API调用中使用Javascript变量。

我正在尝试使用此变通方法在执行API调用之前等待表单提交。但是,第一个ajax推送不会导致$ _POST变量接收数据。网络分析显示正在发送变量。关于这里的第一个问题,请提前道歉。

   $("#form").submit(function(evt) { 

       evt.preventDefault(); 
       var inputAddress = $(this).find("input[type='text']").val();

       // Ajax form Submit
       $.ajax ({
           url:'index.php',
           method: 'POST',
           data:{inputAddress:inputAddress},
           success: function() {

                var add = '<?php echo ($_POST['inputAddress'])?>'; // BLANK?


                    // API call
               var apiResult = $.ajax ({
                   url: 'https://maps.googleapis.com/maps/api/geocode/json?address='+add+'&key=AIzaSyDcNLmq6E6K-bDefI-28E1qiqugS_-wnhI',
                   method: 'get',
                   success: function(data) {
                       window.console.log(data); 
                           }
                  }) 
           }
        })
      }) 
   })

2 个答案:

答案 0 :(得分:1)

似乎已经在javascript上有了这个变量,所以没有必要从$ _POST获取它。尝试使用这种方式,看看它是否有效:

   $("#form").submit(function(evt) { 

       evt.preventDefault(); 
       var inputAddress = $(this).find("input[type='text']").val();

       // Ajax form Submit
       $.ajax ({
           url:'index.php',
           method: 'POST',
           data:{inputAddress:inputAddress},
           success: function() {

                    // API call
               var apiResult = $.ajax ({
                   url: 'https://maps.googleapis.com/maps/api/geocode/json?address='+inputAddress+'&key=AIzaSyDcNLmq6E6K-bDefI-28E1qiqugS_-wnhI',
                   method: 'get',
                   success: function(data) {
                       window.console.log(data); 
                           }
                  }) 
           }
        })
      }) 
   })

编辑: 第一个请求也是不必要的,因此您可以删除它:

   $("#form").submit(function(evt) { 

       evt.preventDefault(); 
       var inputAddress = $(this).find("input[type='text']").val();

       // API call
       var apiResult = $.ajax ({
              url: 'https://maps.googleapis.com/maps/api/geocode/json?address='+inputAddress+'&key=AIzaSyDcNLmq6E6K-bDefI-28E1qiqugS_-wnhI',
              method: 'get',
              success: function(data) {
                  window.console.log(data); 
              }
       }) 
   })

答案 1 :(得分:0)

我在你的代码中发现了一个问题。我认为包含上述代码的页面是 PHP脚本

因此,Apache(PHP服务器)处理<?php echo ($_POST['inputAddress'])?>并将 空值打印到其中

&#13;
&#13;
$("#form").submit(function(evt) { 

       evt.preventDefault(); 
       var inputAddress = $(this).find("input[type='text']").val();

       // Ajax form Submit
       $.ajax ({
           url:'index.php',
           method: 'POST',
           data:{inputAddress:inputAddress},
           success: function() {

                var add = ''; // PHP leaves it Empty...


                    // API call
               var apiResult = $.ajax ({
                   url: 'https://maps.googleapis.com/maps/api/geocode/json?address='+add+'&key=AIzaSyDcNLmq6E6K-bDefI-28E1qiqugS_-wnhI',
                   method: 'get',
                   success: function(data) {
                       window.console.log(data); 
                           }
                  }) 
           }
        })
      }) 
   })
&#13;
&#13;
&#13;