使用jQuery AJAX将数据加载到字段中

时间:2013-01-07 10:37:29

标签: javascript jquery ajax

我在下面的代码中运行getGrades函数来调用。

function getGrades(grading_company) {
    // Set file to get results from..
    var loadUrl = "ajax_files/get_grades.php";

    // Set data string
    var dataString = 'gc_id=' + grading_company;

    // Set the callback function to run on success
    var callback = showGradesBox;

    // Run the AJAX request
    runAjax(loadUrl, dataString, callback);
}

function showGradesBox(response) {
    // Load data into grade field

    // Hide condition fields
    jQuery('#condition').hide();
    jQuery('#condition_text').hide();

    // Show grade fields
    jQuery('#grade_wrapper').show();
    jQuery('#grade_text_wrapper').show();    
}

function runAjax(loadUrl, dataString, callback) {
     jQuery.ajax({
        type: 'GET',
        url: loadUrl,
        data: dataString,
        dataType: 'html',
        error: ajaxError,
        success: function(response) {
            callback(response);
        }
    });    
}

现在您可以看到我将AJAX响应数据传递给showGradesBox函数;但是我现在还不确定如何将它加载到现场。

我看过使用.load()的示例,但似乎您必须同时使用此URL;我遇到的唯一可以使用的其他功能是.html();但它的描述听起来不对劲!?

3 个答案:

答案 0 :(得分:1)

.html()应该有用......

  

当.html()用于设置元素的内容时,该元素中的任何内容都将被新内容完全替换。此外,在使用新内容替换这些元素之前,jQuery会从子元素中删除其他构造(如数据和事件处理程序)。

function showGradesBox(response) {

  // Load data into grade field
  jQuery('#yourgradefieldID').html(response);

  // Hide condition fields
 jQuery('#condition').hide();
 jQuery('#condition_text').hide();


 // Show grade fields
 jQuery('#grade_wrapper').show();
 jQuery('#grade_text_wrapper').show();    

}

答案 1 :(得分:0)

假设一个ID为grade_text的字段,并返回PHP中的字符串:

function showGradesBox(response) {

  // Load data into grade field

  jQuery('#grade_text').val(response);

  // Hide condition fields
  jQuery('#condition').hide();
  jQuery('#condition_text').hide();


  // Show grade fields
  jQuery('#grade_wrapper').show();
  jQuery('#grade_text_wrapper').show();    

}

答案 2 :(得分:0)

这会为您的回调分配一个'undefined'值。

// Set the callback function to run on success
var callback = showGradesBox;

尝试在此类函数之前将函数分配给名为showGradesBox的变量

var showGradesBox = function(response) {
    // Load data into grade field

    // Hide condition fields
    jQuery('#condition').hide();
    jQuery('#condition_text').hide();

    // Show grade fields
    jQuery('#grade_wrapper').show();
    jQuery('#grade_text_wrapper').show();    
}

function getGrades(grading_company) {
    // Set file to get results from..
    var loadUrl = "ajax_files/get_grades.php";

    // Set data string
    var dataString = 'gc_id=' + grading_company;

    // Set the callback function to run on success
    var callback = showGradesBox;

    // Run the AJAX request
    runAjax(loadUrl, dataString, callback);
}

function runAjax(loadUrl, dataString, callback) {
     jQuery.ajax({
        type: 'GET',
        url: loadUrl,
        data: dataString,
        dataType: 'html',
        error: ajaxError,
        success: function(response) {
            callback(response);
        }
    });    
}