如何使用 Javascript 进行 Ajax 调用

Question

我需要的：

• 我需要使用 javascript 发送 ajax 调用。
• 我已经使用 jquery 进行 ajax 调用。

查询代码：

var mobile = $("#mobiledropdown".attr("value");
url = window.location.href.indexOf("?") > -1 ? document.URL + "&asyn=1" : document.URL + "?asyn=1", jQuery.support.cors = !0, $.ajax({
type: "GET",
url: mobile,
cache: !1,
dataType: "json",
crossDomain: !0,
success: function(t) {
    if (t.industry.length > 0) {
        industry = "{{ page_param.page.industry_url }}";

        for (var e = 0; e < t.industry.length; e++)

        $("#industry").append("" != industry && t.industry[e].industry_url == industry ? "<option value=" + t.industry[e].industry_url + " selected >" + t.industry[e].name + " </option>" : "<option value=" + t.industry[e].industry_url + ">" + t.industry[e].name + " </option>")

    }

    else $("#industry").addClass("off").css({
        "background-color": "#f4f4f4",
        "border-color": "#eaeaea",
        color: "#ccc"
    }), $("#industry").attr("disabled", "");
    if (t.country.length > 0) {
        country = "{{ page_param.page.country_url }}";
        for (var e = 0; e < t.country.length; e++) $("#country").append("" != country && t.country[e].country_url == country ? "<option value=" + t.country[e].country_url + " selected >" + t.country[e].text + " </option>" : "<option value=" + t.country[e].country_url + ">" + t.country[e].text + " </option>")
    } else $("#country").addClass("off"), $("#country").attr("disabled", "");
    if (t.city.length > 0) {
        city = "{{ page_param.page.city_url }}";
        for (var e = 0; e < t.city.length; e++) $("#city").append("" != city && t.city[e].city_url == city ? "<option value=" + t.city[e].city_url + " selected >" + t.city[e].text + " </option>" : "<option value=" + t.city[e].city_url + ">" + t.city[e].text + " </option>")
    } else $("#city").addClass("off").css({
        "background-color": "#f4f4f4",
        "border-color": "#eaeaea",
        color: "#ccc"
    }), $("#city").attr("disabled", "");
    if (t.type.length > 0) {
        type = "{{ page_param.page.event_type }}";
        for (var e = 0; e < t.type.length; e++) 1 == t.type[e].entityType && $("#shows").append("" != type && t.type[e].entityType == type ? "<option value=" + t.type[e].entityType + " selected > Trade Shows </option>" : "<option value=" + t.type[e].entityType + "> Trade Shows </option>"), 2 == t.type[e].entityType && $("#shows").append("" != type && t.type[e].entityType == type ? "<option value=" + t.type[e].entityType + " selected > Conferences </option>" : "<option value=" + t.type[e].entityType + "> Conferences </option>")
    }
    $("#shows").append("<option value= 3 > Venues </option>"), $("#shows").append("<option value= 4> Organizers </option>"), $("#shows").append("<option value= 5> Top100 </option>")
}
});

• Javascript ajax 调用不是工作代码

   window.onload = function() { var mobile = document.getElementById('mobiledropdown').getAttribute('value'); url = window.location.href.indexOf("?") > -1 ? document.URL + "&asyn=1" : document.URL + "?asyn=1" function loadFilters() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 ) { if(xmlhttp.status == 200) { if (xmlhttp.t.industry.length > 0) { industry = "{{ page_param.page.industry_url }}"; for (var e = 0; e < xmlhttp.t.industry.length; e++) $("#industry").append("" != industry && xmlhttp.t.industry[e].industry_url == industry ? "<option value=" + xmlhttp.t.industry[e].industry_url + " selected >" + xmlhttp.t.industry[e].name + " </option>" : "<option value=" + xmlhttp.t.industry[e].industry_url + ">" + xmlhttp.t.industry[e].name + " </option>") } else $("#industry").addClass("off").css({ "background-color": "#f4f4f4", "border-color": "#eaeaea", color: "#ccc" }), $("#industry").attr("disabled", ""); if (xmlhttp.t.country.length > 0) { country = "{{ page_param.page.country_url }}"; for (var e = 0; e < xmlhttp.t.country.length; e++) $("#country").append("" != country && xmlhttp.t.country[e].country_url == country ? "<option value=" + xmlhttp.t.country[e].country_url + " selected >" + xmlhttp.t.country[e].text + " </option>" : "<option value=" + xmlhttp.t.country[e].country_url + ">" + xmlhttp.t.country[e].text + " </option>") } else $("#country").addClass("off"), $("#country").attr("disabled", ""); if (xmlhttp.t.city.length > 0) { city = "{{ page_param.page.city_url }}"; for (var e = 0; e < xmlhttp.t.city.length; e++) $("#city").append("" != city && xmlhttp.t.city[e].city_url == city ? "<option value=" + xmlhttp.t.city[e].city_url + " selected >" + xmlhttp.t.city[e].text + " </option>" : "<option value=" + xmlhttp.t.city[e].city_url + ">" + xmlhttp.t.city[e].text + " </option>") } else $("#city").addClass("off").css({ "background-color": "#f4f4f4", "border-color": "#eaeaea", color: "#ccc" }), $("#city").attr("disabled", ""); if (xmlhttp.t.type.length > 0) { type = "{{ page_param.page.event_type }}"; for (var e = 0; e < xmlhttp.t.type.length; e++) 1 == xmlhttp.t.type[e].entityType && $("#shows").append("" != type && xmlhttp.t.type[e].entityType == type ? "<option value=" + xmlhttp.t.type[e].entityType + " selected > Trade Shows </option>" : "<option value=" + xmlhttp.t.type[e].entityType + "> Trade Shows </option>"), 2 == xmlhttp.t.type[e].entityType && $("#shows").append("" != type && xmlhttp.t.type[e].entityType == type ? "<option value=" + xmlhttp.t.type[e].entityType + " selected > Conferences </option>" : "<option value=" + xmlhttp.t.type[e].entityType + "> Conferences </option>") } $("#shows").append("<option value= 3 > Venues </option>"), $("#shows").append("<option value= 4> Organizers </option>"), $("#shows").append("<option value= 5> Top100 </option>") } else if(xmlhttp.status == 400) { alert('There was an error 400') } else { alert('something else other than 200 was returned') } } } xmlhttp.open("GET", "mobile", true); xmlhttp.send(); } };

HTML 元素

  <span id="mobiledropdown" value="{{-p|raw}}" onload="loadFilters();"></span>

问题

• xhr 请求不起作用。

• 我是使用 javascript 的 ajax 新手。

• jquery ajax 调用工作正常，但使用 javascript 的 ajax 不起作用。

• 我想要 javascript 如何在数据类型中发送 json，在 javascript 中跨域。

• 任何建议都是最受欢迎的。

Answer 1

句法：

jQuery.ajax({
    type: "GET",
    async: false, // In your code you're waiting the req. I dont know why.
    url: "http://someUrl", // Remote URL at which you sending the request
    success: function(response) {
        // Here you can handle the response from the server.
    },
    error: function(error) {
        // Here you handle if the HTTP request fails (if status is > 299)
    }
})

如果您只是错过设置async默认值是true ，那么它将发送请求，您的代码将继续执行。 响应可用后，将调用success函数。 我建议使用async: true或者只是不要在选项中定义它。 如果您不尝试访问成功函数之外的响应数据，则不需要它。

您可以使用$代替 jQuery，以防此变量未被其他库或其他代码覆盖。

在 jQuery 对象中，您可以放置​​许多其他选项用于缓存、请求、文档

您可以用$.ajax({})替换所有基本 javascript 的 XMLHttpRequest 功能

您可以使用速记方法$.get()

在你的情况下：

$.get('mobile', function(response) {
    // Here you can handle the response when it come from the server.
})