Имам много елементарен формуляр с едно поле за въвеждане. Искам да изпратя този формуляр с помощта на 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 + "");
},
});
});
});
