从原型转换为jQuery的 [英] converting from prototype to jquery

问题描述

我试图做的是从MySQL数据库获取数据的php文件一个div一个简单的Ajax更新。一个功能填充DIV，其他添加信息到数据库，并叫上点击提交按钮。我想知道，如果有人可以给我自己的等价物的jQuery。下面是原型版本。

 ＆LT;脚本＆GT;
功能的getMessages（）{
  新的Ajax.Updater（'聊天'，'messages.php'，{
    的onSuccess：函数（）{
      window.setTimeout（的getMessages，3000）;
    }
  }）;
}
的getMessages（）;
＆LT; / SCRIPT＆GT;

＆LT;脚本＆GT;
函数方法addMessage（）{
  新的Ajax.Updater（'聊天'，'add.php'，{
    方法：'后'，
    参数：$（'chatmessage'）序列化（）。
    的onSuccess：函数（）{
      $（'的MessageText'）值='';
    }
  }）;
}
＆LT; / SCRIPT＆GT;
 

解决方案

在 jQuery的阿贾克斯（）电话做这一切。它的包装中包含。获得较少的参数（）。员额（）和.load（），您可以使用更简洁的语法。

您没有提到什么样的格式，你回来的数据是，你需要指定的阿贾克斯（）调用。大致是：

 函数方法addMessage（消息）{
  $阿贾克斯（{
    网址：'add.php'，
    成功：函数（）{
      $（＃chatmessage）文本（''）。
    }，
    错误：功能（）{...}，
    超时：3000，
    数据： {
      消息：消息
    }
  }）;
 }

功能的getMessages（）{
  $阿贾克斯（{
    网址：messages.php，
    数据类型：HTML，
    超时：3000，
    错误：功能（）{...}，
    成功：功能（数据）{
      $（＃邮件）HTML（数据）。
    }
  }）;
}
 

注意： dataType参数只需搭配任何的脚本生成。如果messages.php生产，说，消息的HTML列表，然后将其设置的数据类型设置为HTML。如果是这样的话，你还可以简化code到：

 函数的getMessages（）{
  $（＃信息）的负载（message.php）。
}
 

注意：的load（）函数只是一个围绕阿贾克斯包装（）。使用阿贾克斯（）如果需要设置像超时，错误处理等。例如：

 ＆LT; D​​IV ID =消息＆GT;＆LT; / DIV＆GT;
＆LT;输入类型=按钮ID =的getMessages值=获取信息＆GT;
...
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
  $（＃的getMessages）。点击（函数（）{
    $（本）.attr（已禁用，真）;
    $阿贾克斯（{
      网址：message.php，
      数据类型：HTML，
      超时：5000，
      错误：函数（）{
        警报（错误谈话服务器。）;
        $（本）.attr（已禁用，假）;
      }，
      成功：功能（数据）{
        $（＃邮件）HTML（数据）。
        $（本）.attr（已禁用，假）;
      }
    }）;
  }）;
}）;
＆LT; / SCRIPT＆GT;
 

以上是一个更完整的例子，应该给你的，你可以用什么额外的参数的想法。如果您不需要它们只是使用简写。

I'm trying to do a simple ajax update of a div from a php file that gets data from a mysql database. One function populates the div, the other adds messages to the database and is called on click of a submit button. I was wondering if someone could give me their equivalents in jquery. Below are the prototype versions.

<script>
function getMessages(){
  new Ajax.Updater('chat','messages.php', {
    onSuccess:function(){
      window.setTimeout( getMessages, 3000 );
    }
  });
}
getMessages();
</script>

<script>
function addmessage(){
  new Ajax.Updater('chat','add.php',{
    method:'post',
    parameters: $('chatmessage').serialize(),
    onSuccess: function() {
      $('messagetext').value = '';
    }
  });
}
</script>

解决方案

The jQuery .ajax() call does it all. It has wrappers with less parameters like .get(), .post() and .load() that you can use for less verbose syntax.

You don't mention what format the data you get back is in. You need to specify in the .ajax() call. Roughly:

function addMessage(message) {
  $.ajax({
    url: 'add.php',
    success: function() {
      $("#chatmessage").text('');
    },
    error: function() { ... },
    timeout: 3000,
    data: {
      message: message
    } 
  });
 }

function getMessages() {
  $.ajax({
    url: 'messages.php',
    dataType: 'html',
    timeout: 3000,
    error: function() { ... },
    success: function(data) {
      $("#messages").html(data);
    }
  });
}

Note: the dataType parameter just needs to match whatever the script produces. If messages.php produces, say, an HTML list of messages then set it the dataType to "html". If that is the case, you can also simplify the code to:

function getMessages() {
  $("#messages").load("message.php");
}

Note: the load() function is just a wrapper around .ajax(). Use .ajax() if you need to set things like timeouts, error handling, etc. For example:

<div id="messages"></div>
<input type="button" id="getmessages" value="Get Messages">
...
<script type="text/javascript">
$(function() {
  $("#getmessages").click(function() {
    $(this).attr("disabled", "true");
    $.ajax({
      url: 'message.php',
      dataType: "html",
      timeout: 5000,
      error: function() {
        alert("Error talking to server.");
        $(this).attr("disabled", "false");
      },
      success: function(data) {
        $("#messages").html(data);
        $(this).attr("disabled", "false");
      }
    });
  });
});
</script>

The above is a fuller example and should give you an idea of what you can use the extra parameters for. If you don't need them just use the shorthand versions.

这篇关于从原型转换为jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！