无法将ajax数据绑定到弹出窗口?

时间:2017-06-19 07:47:38

标签: javascript jquery python ajax django

我正在使用Django并且在弹出窗口时,我正在显示用户详细信息我正在使用HTML使用ajax和django的形式获取数据但是我无法将数据绑定到我的弹出窗口中。

我的观点: -

def app_user_by_id(request,user_id=None):
    if request.method == "GET":
        result_data_for_editing ={}
        master_user_types_list = MasterUserTypes.objects.using("cms").all()
        university_all_list = Universities.objects.using("cms").all()
        if request.method == "GET":
            get_user_api_url = userService['getUserDetail'] + str(user_id)
            response_data = create_get_request(get_user_api_url)
            if response_data.status_code == 200:
                print response_data.text
                json_data = json.loads(response_data.text)
                if json_data['data'] is not None:
                    result_data_for_editing = json_data['data']
                if request.is_ajax():
                    html = render_to_string('templates/app_user/user_by_id.html',
                                            {'result_data_for_editing': result_data_for_editing,
                                             'master_user_types_list': master_user_types_list,'university_all_list':university_all_list,})
                    return HttpResponse(html)

和ajax调用函数: -

$(document).ready(function () {
    $('.getObjectById').click(function () {
        if ($(this).attr('id') && $(this).attr('action')) {
            getObjectById(this);

        }
        else {
            alert("id and action is required field ...............")
        }
    });
});


function getObjectById(object) {

    var baseURL = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
    var requestData = {};
    var id = object.getAttribute("id");
    requestData.id = id;
    $.ajax({
        url: baseURL+'/appuser/getUserDetailById/'+ id,
        method: 'GET',
        dataType: "json",
        contentType: "application/json",
        beforeSend: function () {

        },
        success: function (data) {
            alert("hjwekhkwhekewh");
                var div ='<div ' + '>' + data+ '</div>';
            $("#usergetdetailfromapi").append(data);
        },
        error: function (jqXHR, ex) {
            ajaxLoaderStop();
        }
    });

}

ajax调用没有问题,它的响应是成功的,但我无法将我的数据绑定到此下拉列表中: -

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">User Detail</h4>
                </div>
                <div  class="modal-body " >
                    <div id="usergetdetailfromapi">

                    </div>
                </div>

            </div>
        </div>
    </div>

我刚刚调试了我的ajax请求它在成功的情况下不会出现错误功能。

提前感谢您的帮助

2 个答案:

答案 0 :(得分:0)

    $.ajax({
    url: '/appuser/getUserDetailById',
    method: 'POST',
    data: { 'id': id },
    dataType: "json",
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        alert("hjwekhkwhekewh");
        var div = '<div ' + '>' + data.d + '</div>';
        $("#usergetdetailfromapi").append(data.d);
    }
});

这里是更新代码使用它。我认为这是工作。

答案 1 :(得分:0)

我得到了解析错误,因为我声明了dataTYpe =“JSON”,但我没有得到任何json数据,而且我重新获取了dataType并且它有效。

function getObjectById(object) {

    var baseURL = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
    var requestData = {};
    var id = object.getAttribute("id");
    requestData.id = id;
    $.ajax({
        url: baseURL+'/appuser/getUserDetailById/'+ id,
        method: 'GET',
        contentType: "application/json",
        beforeSend: function () {

        },
        success: function (data) {
            alert("hjwekhkwhekewh");
                var div ='<div ' + '>' + data+ '</div>';
            $("#usergetdetailfromapi").append(data);
        },
        error: function (jqXHR, ex) {
            ajaxLoaderStop();
        }
    });

}