如何在不刷新的情况下将数据放入 div？

Question

我想使用 JQuery 显示一些数据，但不知道如何显示。我有一个搜索框，用户在其中键入搜索词，然后在提交时，如果找到，将显示一个 div 和数据。如果未找到搜索词，则不应显示 div。

我知道如何在页面刷新时执行此操作，但如何在不刷新页面的情况下执行此操作。有人可以举个例子吗？

---

编辑：

这是我目前正在使用的。我对 JQuery 真的很陌生，所以已经发布的一些示例似乎有点不同。我不确定哪个示例适合我。

$.ajax({
  type: "POST",
  url: "http://site.com/search.php",
  data: dataString,
  dataType: 'json',
  success: function(data) {
    if(data.success == 1){
      alert('success');
    }else{
      alert('fail');
    }
  }
});
return false;

Answer 1

您需要使用jQuery.ajax（如果您想在不刷新的情况下使用它）。这样的事情应该可以工作：

jQuery("#mySearchForm").submit(function() {

    var searchTerm = jQuery("#mySearchInput").val();
    jQuery.ajax({
        url: "http://my.url.com",
        data: searchTerm,
        dataType: "json", //assumes your return data-type is json
        success: function(data, textStatus, jqXHR) {
           //assumes your json has a property called response
           jQuery("#myDiv").html(data.response); 
        },
        error: function(jqXHR, textStatus, errorThrown) {
           //error-handling code
        }
    });

    return false;
});

Answer 2

您可以使用 html() 函数将所需的 html 内容加载到容器（父 div）中。 http://api.jquery.com/html/

Answer 3

您必须使用 AJAX。在这里你可以找到一些很好的例子：http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Answer 4

无论是使用 jQuery.ajax()

或

PageMethods

Answer 5

• 您应该将点击事件绑定到您的提交按钮。

• 当它被点击时，你应该阻止默认并使用 JQUery 进行 ajax 获取。

• 根据该响应，您应该设置该 div 的 html。

Answer 6

假设您有这样一个使用非 AJAX 工作的搜索表单：

<form action="http://www.example.com/search" type="post">
   <input type="text" name="search" id="search" />
   <button id="searchButton" type="submit">Search</button>
</form>

在发布时它会添加一个 DIV，如下所示。

<div id="results">
  ...
</div>

在不修改服务器端代码的情况下，您可以通过执行以下操作使其与 AJAX 一起使用。

<script type="text/javascript">
  $(function() {
      $('form').submit( function() {
         var $form = $(this); // store a reference to the form
         // do an AJAX post using the form action and the data from the form
         // and get the result.
         $.post( $form.attr('action'), $form.serialize(), function(result) {
              // find the results div inside the returned html and insert
              // it in the DOM after the form element.
              $('#results',$(result)).after($form);
         });
      });
  });
</script>

Answer 7

这是一个例子，没有显示实际的表单输入

<label id="name_error">Please enter between 2 - 25 legibly written characters, letters  only</label>
<div>
<ul id="display">

</ul>
</div>

<script type="text/javascript">
$(function() {
$('#display').hide();   
$('#name_error').hide(); 
    $('#submit').click(function() { // could be #form .submit

      var twit = $("#twitter_search").val(); //the search variable name
        if (twit == "") {
          $("label#name_error").show();
          $("input#twitter_search").focus();
          return false;
        }  
var datastring = $('#form').serialize(); 

$.ajax({
   url: "<?php echo site_url('twitter/search'); ?>", //this is the same as your Form action
   type: "POST",
   data: datastring, 
    success: function(msg) {
        $('#display').html(msg).show(1000);            
        }
    }); 
    return false;       

});
});
</script>

注意成功函数后的#display，然后向上看，你会看到显示DIV。顺便说一句，该 URL 是一个 codeigniter 示例，您的会有所不同