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

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

Answer 2

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

Answer 3

您需要使用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 4

要么使用 jQuery.ajax()

或

PageMethods

Answer 5

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

<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示例，你的将是不同的

Answer 6

您应该将点击事件绑定到提交按钮。
单击它时，您应该防止默认并使用JQUery创建ajax。
根据该回复，您应该设置该div的html。

Answer 7

假设您有一个使用非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>

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

7 个答案: