Jquery Uncaught ReferenceError: $var没有定义

Question

我有一个问题，我一直得到错误

Uncaught ReferenceError: $shipping_address is not defined

我的目标是获取带有id的输入中的值，然后将它们发送到端点。有人可以看看我的代码，让我知道我在哪里出错。

$(function() {
// storing these in the DOM
var $address_1 = $('#address_1').val();
var $shipping_address = $('#shipping-address').val();
var $shipping_address2 = $('#shipping-address2').val();
var $shipping_city = $('#shipping-city').val();
var $shipping_state = $('#shipping-state').val();
var $shipping_zip = $('#shipping-zip').val();
});
//this is the event im looking for so i can post the users data to be validated by USPS
$(function() {
$("#ao_solo").click(function() {
alert('the click worked'.$shipping_address);
//console.log("the same as billing addy is checked");
// creating an array here
var user_shipping_address = {
shipping_address: $shipping_address.val(),
shipping_address2: $shipping_address2.val(),
shipping_city: $shipping_city.val(),
shipping_state: $shipping_state.val(),
shipping_zip: $shipping_zip.val()
};
// now im calling Nates USPS API
$.ajax({
type: 'POST',
url: '/async/addressverification',
data: user_shipping_address,
success: function(sanitized_address) {
var address_template = "" +
"<div class='form-check'>" +
"<input class='form-check-input' type='radio' name='flexRadioDefault' id='flexRadioDefault1'>" +
"<label class='form-check-label sugaddyspace' for='flexRadioDefault1'>Suggested Address:" +
"<span id='address_1'>" +
"{{shipping_address2}}" +
"{{shipping_address}}" +
"{{shipping_city}}" +
"{{hipping_state}}" +
"{{shipping_zip}}" +
"</label>" +
"</div>" +
"<hr/>";
// some templating studd using Mustache.js
// function add_sanitized_address(sanitized_address){
//    $sanitized_address.append(Mustache.render(address_template, sanitized_address));
// }
},
error: function() {
//error in case something goes wrong.
alert('error saving order or something lol');
}
});
});
});

更新:

根据下面的注释，这里是新的代码，但我仍然看到相同的错误

我按你说的做了，但我仍然得到相同的错误

$(function() {
var address_1 = $('#address_1').val();
var shipping_address = $('#shipping-address').val();
var shipping_address2 = $('#shipping-address2').val();
var shipping_city = $('#shipping-city').val();
var shipping_state = $('#shipping-state').val();
var shipping_zip = $('#shipping-zip').val();
$("#ao_solo").click(function() {
alert('the click worked');
//console.log("the same as billing addy is checked");
// creating an array here
var user_shipping_address ={
shipping_address: $shipping_address.val(),
shipping_address2: $shipping_address2.val(),
shipping_city: $shipping_city.val(),
shipping_state: $shipping_state.val(),
shipping_zip: $shipping_zip.val()
};
// now im calling Nates USPS API
$.ajax({
type:'POST',
url:'/async/addressverification',
data: user_shipping_address,
success: function(sanitized_address){
alert('the click worked');
},
error: function(){
//error in case something goes wrong.
alert('error saving order or something lol');
}
});
});
});

Answer 1

问题在于$shipping_address和其他变量仅在第一个文档的范围内定义。你有现成的处理者。要解决这个问题，可以将它们合并为一个。

另外请注意，$命名约定用于指示包含jQuery对象的变量。由于您正在处理的值是字符串，您应该删除$前缀。

$(function() {
var address_1 = $('#address_1').val();
var shipping_address = $('#shipping-address').val();
var shipping_address2 = $('#shipping-address2').val();
var shipping_city = $('#shipping-city').val();
var shipping_state = $('#shipping-state').val();
var shipping_zip = $('#shipping-zip').val();
$("#ao_solo").click(function() {
var user_shipping_address = {
shipping_address: shipping_address,
shipping_address2: shipping_address2,
shipping_city: shipping_city,
shipping_state: shipping_state,
shipping_zip: shipping_zip
};
$.ajax({
type: 'POST',
url: '/async/addressverification',
data: user_shipping_address,
success: function(sanitized_address) {
alert('the click worked');
},
error: function() {
alert('error saving order or something lol');
}
});
});
});