Question

编辑：我的问题是不是No response from MediaWiki API using jQuery的副本。因为即使它是跨域请求，我也正确地触发JSONP行为，因为jquery会自动发送回调参数。（正如您从我发布的jQuery3100048749602337837095_1485851882249&_=1485851882253

链接中看到的那样

EDIT2：由@AnandMArora解决。解决方案：

<input type="submit" onclick="getUserInput(event)" style="display:none"/>

和功能

getUserInput(evt) { evt.preventDefault();

但由于这是一个评论，我无法将其标记为答案。如果有一个解释为什么这个方法有效（什么是防止的默认行为等），我会选择它作为答案。

我认为“alert”方法是为AJAX函数购买时间，因为它是异步的。但我不知道为什么我需要在这里买时间。它应该仅在getUserInput()使用getWiki()参数调用Input时执行。事实上，我查看了网络监视器，即使我们删除alert("")，也会调用正确的URL（假设提交了“batman”）。

请求网址：https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&generator=search&exsentences=1&exlimit=max&exintro=1&explaintext=1&exsectionformat=wiki&gsrnamespace=0&gsrsearch=batman&callback=jQuery3100048749602337837095_1485851882249&_=1485851882253

如果我手动打开此链接，它可以正常工作。但是没有返回状态代码，控制台记录“错误！”

function getUserInput(){
  var Input = document.getElementById("searchBox").value;
  getWiki(Input); 
  alert(""); //If we remove this line the request fails
}

function generatePage(rawData) {
  console.log(rawData);
  var mainData = rawData.query.pages;
  $.each(mainData, function(value){
    console.log((mainData[value].title + " " + mainData[value].extract));
  });

}


function getWiki(Input){
  $.ajax({
    url: "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&generator=search&exsentences=1&exlimit=max&exintro=1&explaintext=1&exsectionformat=wiki&gsrnamespace=0&gsrsearch=" + Input,
    dataType: "JSONP",
    type: "GET",
    success: function (rawData) {
      generatePage(rawData);
    },
    error: function() {
      console.log("Error!")
    }
  });
}


$(document).ready(function(){


})

我用来提交的HTML是：

<form class="searchForm">
      <input type="text" name="searchRequest" id="searchBox" >
      <input type="submit" onclick="getUserInput()" style="display:none"/>
      </input>
    </form>

我的问题是： 1）为什么会这样？ 2）如何在不关闭async或在ajax函数上使用setTimeout()的情况下解决这个问题？

Answer 1

在一个函数中包装console.log调用：

function getWiki(Input){
  $.ajax({
    url: "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&generator=search&exsentences=1&exlimit=max&exintro=1&explaintext=1&exsectionformat=wiki&gsrnamespace=0&gsrsearch=" + Input,
    datatype: "JSONP",
    type: "GET",
    success:
      function (rawData){
        generatePage(rawData);
      },
    error: 
      function(){
        console.log("Error!")
      }
  });
}

<强>解释

ajax调用期望将函数定义传递给它的事件处理程序（在这种情况下为'success'/'error'）。

您为成功处理程序执行此操作。对于您的错误处理程序，您没有推送函数定义，而是实际上调用（console.log方法）的函数。

将它包装在一个函数声明中（就像你为成功事件回调所做的那样）允许你在调用它而不是调用它时定义回调上发生了什么它在线。

Answer 2

您正在使用 ajax ，输入控件类型“提交”对其所在的表单有一个默认的回发操作。所以jQuery和大多数javascript代码使用evt.preventDefault(); // evt is the object of event passed as a parameter for the click event function这会阻止默认操作，即提交表单。

请将更改更改为：

<input type="submit" onclick="getUserInput(event)" style="display:none"/>

和

function getUserInput(evt) { evt.preventDefault(); ...

这很可能是解决方案。

Answer 3

1）你必须指定一个回调函数，不要直接放置代码（否则它会被执行）但是把它放在一个函数中

错误：function（）{console.log（＆＃34;错误！＆＃34;）;}

2）为了等待响应，您必须指定您的请求是同步的

将async选项设为false

如果您需要异步解决方案，请参阅以下代码段（使用done方法代替success属性）：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
    <form class="searchForm">
      <input type="text" name="searchRequest" id="searchBox" >
      <input type="submit" onclick="javascript:getUserInput()" />
      </input>
    </form>
</body>
<script>
  function getUserInput(){
    var Input = document.getElementById("searchBox").value;
    getWiki(Input); 
    //alert(""); //If we remove this line the request fails
  }

function generatePage(rawData) {
  console.log(rawData);
  var mainData = rawData.query.pages;
  $.each(mainData, function(value){
    console.log((mainData[value].title + " " + mainData[value].extract));
      })

}


function getWiki(Input){
  $.ajax({
    url: "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&generator=search&exsentences=1&exlimit=max&exintro=1&explaintext=1&exsectionformat=wiki&gsrnamespace=0&gsrsearch=" + Input,
    dataType: "JSONP",
    type: "GET",
    async: true,
    error: function(){console.log("Error!");}

  }).done(
      function (rawData) {
        generatePage(rawData);
      }
  );
}


$(document).ready(function(){


})
</script>
</html>

＆＃13;

我希望它可以帮到你。再见。

Ajax函数只能以“alert”成功

3 个答案: