Jquery Ajax调用php脚本我该如何处理数据?
I am trying to get this ajax call to work:
<script type="text/javascript">
$( document ).ready(function() {
$('#home_location').change(function(){
$.ajax({
url: 'GetCommunities.php',
data: {id: $(this).val()},
datatype: 'json',
success: function(data){
console.log(data);
}
});
});
});
</script>
The console log returns my data like so:
[{"rb_communityId":"8","rb_communityLabel":"Sunflower","rb_communityOrder":"12","rb_locationId":"4"}]
my question is how do I make the rb_communitiyId into an array and use that array to for select options to replace a current dropdown?
this code:
$.ajax({
url: 'GetCommunities.php',
data: {id: $(this).val()},
datatype: 'json',
success: function(data){
console.log(data);
});
});
will NOT result to a JSON object, but in a string! replace datatype to dataType and be sure to call echo json_encode(your_array); exit;
in your php file.
Normally, you would be able to access your data (in success
) like data.rb_communityId
and about changing a dropdown, just use this: (Replace #mydropdown
with your own id)
$("#mydropdown").val( data.rb_communityId );
assuming the .communityId is a value of your dropdown.
If you want to replace a dropdown entirely based on the data, do this (in success again):
$("#mydropdown option").remove();
$.each(data,function(key,value) {
$("#mydropdown").append($("<option></option>",{value:value["rb_communityId"],text:value["rb_communityLabel"]}));
});
I dont find uses for your other two variables, the above will add value and text.
Your data is in Json form , so you need to iterate through your data and handle your html with jquery –
<script type="text/javascript">
$( document ).ready(function() {
$('#home_location').change(function(){
$.ajax({
url: 'GetCommunities.php',
data: {id: $(this).val()},
datatype: 'json',
success: function(data){
alert(data.rb_communityId);
//this how you access to ther b_communityId
}
});
});
});
</script>
Assuming that you want to replace all the <option>
element of a particular <select>
element, you can do the following. However, remember to update your <select>
element selector — I have used the dummy selector selectEleSelector
.
$( document ).ready(function() {
$('#home_location').change(function(){
$.ajax({
url: 'GetCommunities.php',
data: {id: $(this).val()},
datatype: 'json',
success: function(data){
// Empty the <select> element of interest
$(selectEleSelector).empty();
// Iterate through your json array
$.each(data, function(i,v) {
// Construct <option>
var $opt = $('<option />', {
value: this.rb_communityId,
text: this.rb_communityLabel
});
// Append construct to <select>
$opt.appendTo(selectEleSelector);
});
}
});
});
});
My answer is made on the assumption that you intend rb_communityId
to be the option's value, and rb_communityLabel
as the text. If that is not what you want, you can switch the keys as of when appropriate :)
You need to replace a combo-box builder code in your success
section
$('#home_location').change(function(){
$.ajax({
url: 'GetCommunities.php',
data: {id: $(this).val()},
datatype: 'json',
success: function(data){
var s = $('<select />');
var obj = $.parseJSON(data);
$('<option />', {value: obj.rb_communityId, text: obj.rb_communityLabel}).appendTo(s);
}
});
});
If it's multiple options in returned values you need to put the parsing section in $.each