Question

我正在研究一个JS项目，我有以下代码：

$(document).ready(function() {

    /**
     * Need variables
     */
    var providers = $("#providers");
    var pagination = $("#pagination");
    var url = "/provider/provider_id_to_change/offers";
	
    /**
     * When a provider is selected
     */
    providers.change(function () {
	
        alert('Before Ajax: ' + url);

        var providerID = $(this).val();

        url = url.replace(/provider_id_to_change/, providerID);

        updateOffers(function(json) {});
    });


    
    function updateOffers(callback, page_to_visit) {

        page_to_visit = typeof(page_to_visit) != 'undefined' ? page_to_visit : 1;

        $.ajax({
            dataType: 'json',
            url: url,
            data: {page: page_to_visit}
        }).done(function(json){

            // Do something

			alert('After Ajax: ' + url);
			
            callback(json);

        });
    }
	
        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="providers" style="width: 100%">
	<option value="prov_1">Provider 1</option>
	<option value="prov_2"> Provider 2</option>
	<option value="prov_3">Provider 3</option>
</select>

在第一次ajax调用时，默认url的{{1}}变量已成功更改，但之后所有ajax调用都无法按预期更改/provider/provider_id_to_change/offers。要查看应用于网址的各种更改，在我的代码中，有一个url在ajax调用之前显示初始alert，在ajax调用之后显示另一个url。

JSFIDDLE Demo可用。

请帮帮我。

Answer 1

这是一个修复。您需要保持“模板”URL相同，这样每次要构建新URL时，您的字符串替换都会起作用。

$(document).ready(function() {

    /**
     * Need variables
     */
    var providers = $("#providers");
    var pagination = $("#pagination");
    var url = "/provider/provider_id_to_change/offers";
    var template_url = url; // SAVE URL TEMPLATE

    /**
     * When a provider is selected
     */
    providers.change(function () {
	
        alert('Before Ajax: ' + url);

        var providerID = $(this).val();

        url = template_url.replace(/provider_id_to_change/, providerID);

        updateOffers(function(json) {});
    });


    
    function updateOffers(callback, page_to_visit) {

        page_to_visit = typeof(page_to_visit) != 'undefined' ? page_to_visit : 1;

        $.ajax({
            dataType: 'json',
            url: url,
            data: {page: page_to_visit}
        }).done(function(json){

            // Do something

			alert('After Ajax: ' + url);
			
            callback(json);

        });
    }
	
        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="providers" style="width: 100%">
	<option value="prov_1">Provider 1</option>
	<option value="prov_2"> Provider 2</option>
	<option value="prov_3">Provider 3</option>
</select>

Answer 2

当前代码的问题在于它寻找特定字符串并将其替换为提供者ID。由于此字符串在下一次迭代中在第一次迭代中被替换，因此替换函数将不会执行任何操作。

如果提供者ID之前的url路径始终保持相似，则解决此问题的方法将是.split（）和.join（）;

将网址拆分为“/”，并将id索引处的值替换为提供者ID。

 providers.change(function() {

    alert('Before Ajax: ' + url);
    var providerID = $(this).val();
    var arr = url.split("/");
    arr[5] = providerID; // the id index
    url = arr.join("/");
    updateOffers(function(json) {});
  });

小提琴：https://jsfiddle.net/672nfo1t/

Answer 3

首先，你可以 - 而且应该！ - 从构成它们的函数返回Ajax请求。不再对jQuery Ajax请求使用“回调”语义，这已经过时了。

其次，避免全局变量，简单明了。尝试编写不依赖于全局状态的函数。这样，可以避免无意中覆盖全局状态的错误（就像使用url变量一样）。

您的代码可以压缩为：

$(function() {
    $("#providers").change(function () {
        var providerId = $(this).val(),
            page = $("#pagination").val();

        getOffers(providerId, page).done(function (data) {
            // use data ...
        });
    });

    function getOffers(providerId, pageNum) {
        var url = "/provider/_/offers".replace("_", encodeURIComponent(providerId));
        return $.get(url, { page: pageNum || 1 });
    }
});

第三，没有理由在Ajax请求中指定dataType: 'json'。确保服务器发送正确的Content-Type标头，jQuery将自动执行正确的操作。

最后，您没有处理JSON。您正在处理数据（例如，对象或数组）。 JSON纯粹是一种传输格式。调用JSON.parse()后，它将停止为JSON。在这个时间点之后不要将它称为JSON。

在调用函数之前定义的变量不会改变

3 个答案: