Question

我有一个带有一个输入字段的基本表单。我想使用AJAX提交此表单并在页面上的div中显示响应。

有些观点。 - API的响应是JSON数据类型。 - API与发出请求的客户端不在同一服务器上。

使用我当前的代码，我可以看到请求正在进行，但我没有收到任何回复。我确实在调试控制台中看到了警告，但我不知道如何继续或如何更新我的代码以使其正常工作。

调试控制台中的警告：

阻止跨源请求：同源策略禁止读取远程资源在 https://api.ssllabs.com/api/v2/analyze?&host=www.domain.com。这个可以通过将资源移动到同一域或启用CORS来修复。

- 我的HTML -

<body>
  <form id="myAjaxRequestForm">
    <fieldset>
      <legend>Request</legend>
      <p>
        <label for="hostname">Host:</label>
        <input id="hostName" type="text" name="hostName" />
      </p>
      <p>
        <input id="myButton" type="button" value="Submit" />
      </p>
    </fieldset>
  </form>
  <div id="anotherSection">
    <fieldset>
      <legend>Response</legend>
      <div id="ajaxResponse"></div>
    </fieldset>
  </div>
</body>

- 我的Jquery与AJAX -

$(document).ready(function() {

  //Stops the submit request
  $("#myAjaxRequestForm").submit(function(e) {
    e.preventDefault();
  });

  //checks for the button click event
  $("#myButton").click(function(e) {

    //get the form data and then serialize that
    dataString = $("#myAjaxRequestForm").serialize();

    //get the form data using another method
    var hostName = $("input#hostName").val();
    dataString = "host=" + hostName;

    //make the AJAX request, dataType is set to json
    //meaning we are expecting JSON data in response from the server
    $.ajax({
      type: "GET",
      url: "https://api.ssllabs.com/api/v2/analyze?",
      data: dataString,
      dataType: "json",

      //if received a response from the server
      success: function(response) {
        $("#ajaxResponse").append("<b>Server Name:</b> " + response.first + "");
        $("#ajaxResponse").append("<b>Port:</b> " + response.second + "");
        $("#ajaxResponse").append("<b>Protocol:</b> " + response.third + "");
      },

    });
  });

});

Answer 1

阻止跨源请求：意味着您无法从http：//调用https：//站点，并且大多数浏览器会禁用此功能。

解决方案：

1）使用 jsonp 代替 json for dataType：“json”如果有效，一切都很好

2）如果不支持 jsonp ，请在工作目录中创建一个php文件，访问API VIA curl。和回声响应为json。然后只从你的ajax调用那个php。

如果JSON失败则更新

我假设您使用的是php

在您的目录

中创建一个名为api.php的php文件

<?php
header( "Content-Type: application/json" );
//create cURL connection
$curl_connection =curl_init('https://api.ssllabs.com/api/v2/analyze?host='.$_REQUEST['host']);

///set options
curl_setopt($curl_connection, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt($curl_connection, CURLOPT_USERAGENT, "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)");
curl_setopt($curl_connection, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl_connection, CURLOPT_SSL_VERIFYPEER, false);


//perform our request
$result = curl_exec($curl_connection);
echo $result;
//close the connection
curl_close($curl_connection);


?>

现在从您的javascript中调用api.php而不是https://api.ssllabs.com/api/v2/analyze？

$.ajax({
  type: "GET",
  url: "yourhost/yourpath/api.php", //change this that suits you
  data: dataString,
  dataType: "json",
  ....

最后填充像这样的值

    $("#ajaxResponse").append("<b>Server Name:</b> " + response.endpoints[0].serverName+ "");
    $("#ajaxResponse").append("<b>Port:</b> " + response.port+ "");
    $("#ajaxResponse").append("<b>Protocol:</b> " + response.protocol+ "");

Answer 2

由于您正在使用JSON，因此您可以将dataType属性更改为jsonp，并且请求将成功完成，忽略跨源策略。

$.ajax({
  type: "GET",
  url: "https://api.ssllabs.com/api/v2/analyze?",
  data: dataString,
  dataType: "jsonp",
...

编辑：此请求成功绕过了跨源策略，但仍会导致Unexpected Token :错误。有关此错误的详细信息，请参阅here。如果您有权访问要从中请求数据的服务器，请添加响应标头Access-Control-Allow-Origin:'*'。有关CORS标头的详细信息，请参阅here。

使用AJAX提交html表单并显示来自外部api的json响应

2 个答案: