Question

我通过一些教程，但我继承的代码可能是高级的。有人可以帮我理解这段代码并一步一步地向我解释一下吗？我所知道的是，当我更新/改变心情desc和颜色时，我输入的情绪desc和颜色的实际措辞会改变颜色......

function ax_update_mood()
{
   //what is it doing here?
   var  str_mood_desc    = $('#moodmeter_form_mood_desc').val();
   var  str_mood_color    = $('#moodmeter_form_mood_color').val();

  //understand this part
  if(str_mood_desc.length  < 3  || str_mood_desc.length > 32)
  {
 alert('Mood Description must be between 3 - 32 characters long.');
 return
  }

 //understand this part
 if(str_mood_color.length  < 1  || str_mood_color.length > 32)
 {
alert('Mood Color must be between 3 - 32 characters long.');
return
 }

//have NO idea on what is going on here!
$.ajax({
type: "POST",
url: "moodupdate",
data: "mood_desc="+str_mood_desc+"&mood_color="+str_mood_color,
success: function(msg)
{
  ax_get_mood();
  alert( "Mood Updated");  
}
})
}

function ax_get_mood()
{
    //this is also a complete mistery, have no idea what this code does
$.getJSON('/apps.php/profile/getmood', function(data) 
{
    //const TIME_DIFF = 180; 
    var td_mood_color       = $('#current_mood_color');
    var td_mood_desc        = $('#current_mood_desc');
    var spn_mood_updated_at = $('#spn_updated_at');

    if(data.date_diff_in_min < 180)
    {
        spn_mood_updated_at.removeClass().addClass('span_mood_red');
    td_mood_desc.removeClass().addClass('span_mood_red');
   td_mood_color.removeClass().addClass('span_mood_red');
    }
    else
    {       spn_mood_updated_at.removeClass().addClass('span_mood_blue');
        td_mood_desc.removeClass().addClass('span_mood_blue');
        td_mood_color.removeClass().addClass('span_mood_blue');
    }

    spn_mood_updated_at.text(data.mood_updated_at);

    td_mood_color.text(data.mood_color);
    td_mood_desc.text(data.mood_desc);

});
}

谢谢

Answer 1

从官方文档开始，一切都应该变得更加清晰：

http://api.jquery.com/jQuery.ajax/

和

http://api.jquery.com/jQuery.getJSON/

Answer 2

如果您在理解语法时遇到问题，则代码使用JQuery库从moodmeter_form_mood_desc和moodmeter_form_mood_color获取值，向目标发送ajax请求，以及解析JSON数据。

有关详细信息，请参阅：http://jquery.com/，搜索jQuery.ajax（）和jQuery.getJSON（）

Answer 3

您发布的代码是使用jQuery。函数的前2行只获取2个元素的值（可能是input个元素），并将这些值赋给变量。

$.ajax部分正在使用jQuery ajax函数通过HTTP POST请求将数据发送到位于URL moodupdate的任何文件。发送的数据使用之前获得的值在下一行构建为字符串。

下一行指定一个在AJAX请求成功时执行的函数。该函数依次调用ax_get_mood函数，该函数使用jQuery getJSON函数向/apps.php/profile/getmood发出另一个异步请求，并处理响应（将采用JSON格式，如图所示）通过在另一个匿名函数中使用getJSON而不是另一个ajax函数）。

Answer 4

有关AJAX的基础知识，请参阅此文章，您可能已经完成了。

总之，有三个步骤：

//Step 1. get the XMLHTTPRequest object
if (window.XMLHttpRequest) //All mordern browsers
{
    obj = new XMLHttpRequest();
}
else if (window.ActiveXObject) //IE6, 7
{
    obj = new ActiveXObject("Microsoft.XMLHTTP");
} 
else
{
    alert("Your browser does not support AJAX");
    return;
}

// Step 2: set the callback function, as processMoodUpdateResponse
//This function will be called when the response for the 
//call (done in step 3) comes back

obj.onreadystatechange = processMoodUpdateResponse;
// Step 3: Do the server call. 
//"POST" is the request type, true for asynchronous request
var url = "moodupdate?mood_desc="+str_mood_desc+"&mood_color="+str_mood_color
obj.open("POST", "moodupdate", true);
obj.send();

//The callback function
function processMoodUpdateResponse()
{
      ax_get_mood();
      alert( "Mood Updated"); 
}

您继承的代码使用JQuery Ajax.

以下创建一个Ajax请求，注册回调和提交，等同于上面的（当然更多 jquerish 和更简单）

$.ajax({
type: "POST",
url: "moodupdate",
data: "mood_desc="+str_mood_desc+"&mood_color="+str_mood_color,
success: function(msg)
{
  ax_get_mood();
  alert( "Mood Updated");  
}
})

getJSON是jQuery的另一种方法，用于调用服务器并获得JSON响应。奇怪的是，Ajax回调（在响应到来时调用）会产生另一个ajax调用。

$('#current_mood_color')相当于document.getElementById('current_mood_color');。这是jquery通过id选择元素的方式。 JQuery是一个非常强大（方便）的selector API，这是选择元素的基本方法之一。

#someThing是指ID为someThing的元素，因此在代码库中搜索someThing会返回一些内容。

请帮助理解ajax代码

4 个答案: