Question

我需要什么：

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

Jquery代码：

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无效。
我想javscript如何在数据类型中发送json，在javscript中发送跨域。
欢迎提出任何建议。

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或者不要在选项中定义它。如果您没有尝试在成功功能之外访问响应数据，则不需要它。

如果此varable未被其他库或其他代码覆盖，则可以使用$代替jQuery。

在jQuery对象中，您可以为缓存添加许多其他选项，请求Documentation

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

您可以使用简写方法$.get()

在你的情况下：

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

如何使用Javascript进行Ajax调用

1 个答案: