jQuery提交数据给php，serialize()方法提交所有数据，不发生页面跳转

最新推荐文章于 2021-10-01 14:10:56 发布

dusea

最新推荐文章于 2021-10-01 14:10:56 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/dusea/article/details/48446333

版权

通过JavaScript可以通过名称属性将页面的变量逐个提交给php，但通过名称属性逐个搜索输入字段并将字段的值添加到对象中总是有点麻烦。特别是随着表单变得更复杂，这种方法也会明显变得缺乏扩展性。好在，jQuery为这种常用的操作提供了一种简化方式——.serialize()方法。这个方法作用于一个jQuery对象，将匹配的DOM元素转换成能够随Ajax请求传递的查询字符串。通过使用.serialize()方法，可以把所有的变量都提交给服务器php网页。
===index.html==========

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<div id="text">
<input type= "button" value="按钮"/>
</div> 
<div id="dictionary"> 
</div> 
<div class="letters"> 
  <div class="letter" id="letter-a"> 
    <h3><a href="entries-a.html">A</a></h3> 
  </div> 
  <div class="letter" id="letter-b"> 
    <h3><a href="entries-a.html">B</a></h3> 
  </div> 
  <div class="letter" id="letter-c"> 
    <h3><a href="entries-a.html">C</a></h3> 
  </div> 
  <div class="letter" id="letter-d"> 
    <h3><a href="entries-a.html">D</a></h3> 
  </div> 
  <!-- and so on --> 
  <div class="letter" id="letter-e"> 
  <h3>E</h3> 
  <ul> 
    <li><a href="e.php?term=Eavesdrop">Eavesdrop</a></li> 
    <li><a href="e.php?term=Edible">Edible</a></li> 
    <li><a href="e.php?term=Education">Education</a></li> 
    <li><a href="e.php?term=Eloquence">Eloquence</a></li> 
    <li><a href="e.php?term=Elysium">Elysium</a></li> 
    <li><a href="e.php?term=Emancipation">Emancipation</a> 
      </li> 
    <li><a href="e.php?term=Emotion">Emotion</a></li> 
    <li><a href="e.php?term=Envelope">Envelope</a></li> 
    <li><a href="e.php?term=Envy">Envy</a></li> 
    <li><a href="e.php?term=Epitaph">Epitaph</a></li> 
    <li><a href="e.php?term=Evangelist">Evangelist</a></li> 
  </ul> 
</div> 
<div class="letter" id="letter-f"> 
  <h3>F</h3> 
  <form action="f.php"> 
    <input type="text" name="term" value="" id="term" /> 
    <input type="text" name="user" value="testuser" id="user" /> 
    <input type="submit" name="search" value="search" 
      id="search" /> 
	 </form> 
</div> 
</div> 


</head>
<body >
<script>
$(document).ready(function() { 
  $('#letter-f form').submit(function(event) { 
    event.preventDefault(); 
  var formValues = $(this).serialize(); 
  $.get('f.php', formValues, function(data) { 
        $('#dictionary').html(data); 
    }); 
  }); 
}); 
</script>
</body>
</html>

===f.php==========

<?php 
$entries = array( 
  'EAVESDROP' => array( 
    'part' => 'v.i.', 
    'definition' => 'Secretly to overhear a catalogue of the 
      crimes and vices of another or yourself.', 
    'quote' => array( 
      'A lady with one of her ears applied', 
      'To an open keyhole heard, inside,', 
      'Two female gossips in converse free —', 
      'The subject engaging them was she.', 
      '"I think," said one, "and my husband thinks', 
      'That she\'s a prying, inquisitive minx!"', 
      'As soon as no more of it she could hear', 
      'The lady, indignant, removed her ear.', 
      '"I will not stay," she said, with a pout,', 
      '"To hear my character lied about!"', 
    ), 
    'author' => 'Gopete Sherany', 
  ), 
  'EDIBLE' => array( 
    'part' => 'adj.', 
    'definition' => 'Good to eat, and wholesome to digest, as 
      a worm to a toad, a toad to a snake, a snake to a pig, 
      a pig to a man, and a man to a worm.', 
  ), 
// and so on 
); 
?> 
<?php 
$output = array(); 
foreach ($entries as $term => $entry) { 
  if (strpos($term, strtoupper($_REQUEST['term'])) !== FALSE) { 
    $output[] = build_entry($term, $entry); 
  } 
} 
 
if (!empty($output)) { 
  echo implode("\n", $output); 
} else { 
  echo '<div class="entry">Sorry, no entries found for '; 
  echo '<strong>' . $_REQUEST['term'] . '</strong>.'; 
  echo '</div>'; 
} 


 
function build_entry($term, $entry) { 
  $html = '<div class="entry">'; 
  $html .= '<h3 class="term">'; 
   $html .= $term; 
  $html .= '</h3>'; 
 
  $html .= '<div class="part">'; 
  $html .= $entry['part']; 
  $html .= '</div>'; 
 
  $html .= '<div class="definition">'; 
  $html .= $entry['definition']; 
  if (isset($entry['quote'])) { 
    foreach ($entry['quote'] as $line) { 
      $html .= '<div class="quote-line">'. $line .'</div>'; 
    } 
    if (isset($entry['author'])) { 
      $html .= '<div class="quote-author">'. 
        $entry['author'] .'</div>'; 
    } 
  } 
  
  $html .= $_REQUEST['user'] .'134';
  $html .='<br>';
  $html .= $_REQUEST['user'] .'qew';
  $html .= '</div>'; 
 
  $html .= '</div>'; 
  
  return $html; 
} 
?>

经过测试，我们可以发现数据可以一并进行提交。并且返回只客户端界面。

可以进行修改的地方

可以改为 <form>

$.get('f.php', formValues, function(data) {

可以改为post

dusea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery提交数据给php，serialize()方法提交所有数据，不发生页面跳转

通过JavaScript可以通过名称属性将页面的变量逐个提交给php，但通过名称属性逐个搜索输入字段并将字段的值添加到对象中总是有点麻烦。特别是随着表单变得更复杂，这种方法也会明显变得缺乏扩展性。好在，jQuery为这种常用的操作提供了一种简化方式——.serialize()方法。这个方法作用于一个jQuery对象，将匹配的DOM元素转换成能够随Ajax请求传递的查询字符串。通过使用.serial
复制链接

扫一扫