У меня очень простая форма с одним полем ввода. Я хочу отправить эту форму с помощью 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 + "");
},
});
});
});
