二读 jquery 文档发现一段有意思的例子

 很多时候我们用 ajax 技术来异步更新,做到无刷新的效果。

但是很多时候还要考虑浏览器未开启javascript的情况, 这个时候我们会为没有开启javascript的情形重新编写一种处理。

这就导致可能会出现一个功能的两种实现。 但是从下面的jquery官方例子我们还是会有收获的。

 <!DOCTYPE html>

<html>
<head>
 
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
 
<form action="/" id="searchForm">
   
<input type="text" name="s" placeholder="Search..." />
   
<input type="submit" value="Search" />
 
</form>
 
<!-- the result of the search will be rendered inside this div -->
 
<div id="result"></div>

<script>
 
// attach a submit handler to the form
  $
("#searchForm").submit(function(event) {

   
// stop form from submitting normally
    event
.preventDefault();
       
   
// get some values from elements on the page:
   
var $form = $( this ),
        term
= $form.find( 'input[name="s"]' ).val(),
        url
= $form.attr( 'action' );

   
// Send the data using post and put the results in a div
    $
.post( url, { s: term } ,
     
function( data ) {
         
var content = $( data ).find( '#content' );
          $
( "#result" ).html( content );
     
}
   
);
 
});
</script>

</body>
</html>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注