jquery - 如何从 ajax 响应填充下拉选项

Question

我是 ajax 新手。我想从 ajax 响应填充下拉列表。响应是得到的医生的 json，我想用此列表填充下拉列表，以便管理员可以为患者选择特定的医生。

这是我的 ajax 代码:

$("button").click(function(e) {
    e.preventDefault();
    var id = $(this).val();

    $.ajax({

    type: "POST",
        url: "map/"+id,
        data: { 
            id: $(this).val(),
            '_token': $('input[name=_token]').val() 
        },
        success: function(result) {
            console.log(result);
        },
        error: function(result) {
            alert('error');
        }
    });

Ps:我使用了console.log，这样我就可以查看结果

和我的 Laravel Controller 方法:

public function getDoctorSuggests(Request $request){

        $id = $request->id;
        // Get id from database, just skiping this step there
        $patient = Patient::find($id);

        if ($patient instanceof Patient){

            //get patient location details
            $city = $patient->city;

            //get doctors
            $doctors = Doctor::where('city', $city)->get(); //narrow search to city


          if (!$doctors->isEmpty()){
            $distance =[];

            foreach($doctors as $doctor){
            $location = $this->distance($patient->latitude, $patient->longitude, $doctor->latitude, $doctor->longitude, 'K');
            array_push($distance, $location);
            }

            return response()->json(['doctors' => $doctors]);
            }

        return response()->json(['doctors' => NULL]);
        }
    }

请问如何获取结果并用它填充 html 下拉列表而不重新加载页面？

json 响应是(从我的 chrome 检查器控制台获取的)

Object {doctors: Array(2)}doctors: Array(2)0: Objectaddress: "29 Mambilla Street, Abuja, Nigeria"age: 2city: "Abuja"country: "Nigeria"created_at: "2017-06-14 01:01:06"currency: nulldoctor_cv: nulldoctor_mdcn: "wwjdnwe"email: "doctor@gerocare.org"firstname: "Doctor"id: 1lastname: "Doctor"latitude: 9.0805515longitude: 7.5098858midname: "Midname"phone: "9"place_id: "ChIJ2fEzeToKThARPnGlvU-PKh0"sex: 2state: "FCT"updated_at: "2017-06-14 01:08:52"zip_code: null__proto__: Object1: Objectaddress: "29 Mambilla Street, Abuja, Nigeria"age: 2city: "Abuja"country: "Nigeria"created_at: "2017-06-14 01:01:06"currency: nulldoctor_cv: nulldoctor_mdcn: "wwjdnwe"email: "doctor@gerocare.orgj"firstname: "Doctor"id: 3lastname: "Doctor"latitude: 9.0805515longitude: 7.5098858midname: "Midname"phone: "9"place_id: "ChIJ2fEzeToKThARPnGlvU-PKh0"sex: 2state: "FCT"updated_at: "2017-06-14 01:08:52"zip_code: null__proto__: Objectlength: 2__proto__: Array(0)__proto__: Object

Answer 1

首先尝试验证您的医生模型是否返回某些内容，然后像这样返回:

return response()->json($doctors);

json 响应会将您的输出对象格式化为对象数组。

现在您可以像下面的示例一样填充组合框。

$("button").click(function(e) {
e.preventDefault();
var id = $(this).val();
var select = $('#YourSelectBoxID');
$.ajax({

type: "POST",
    url: "map/"+id,
    data: { 
        id: $(this).val(),
        '_token': $('input[name=_token]').val() 
    },
    success: function(data) {
        var htmlOptions = [];
        if( data.length ){
              for( item in data ) {
                  html = '<option value="' + data[item].id + '">' + data[item].firstname + '</option>';
              htmlOptions[htmlOptions.length] = html;
              }

              // here you will empty the pre-existing data from you selectbox and will append the htmlOption created in the loop result
              select.empty().append( htmlOptions.join('') );
          }
    },
    error: function(error) {
        alert(error.responseJSON.message);
    }
})

});

祝你好运!