学而实习之 不亦乐乎

jQuery基础：通过Ajax向服务器传送数据

2019-02-13 09:24:01

一、执行 GET 请求

这个实例中，服务端我们借助于一个PHP脚本，其代码如下：

<?php
$persons = array(
  'JOHN' => array(
    'age' => '20',
    'country' => 'USA',
    'evaluate' => array(
      'A good man!',
      'A rich man!',
      'A foolish man!',
    ),
    'friends' => 'Rose,James',
  ),
  'ROSE' => array(
    'age' => '20',
    'country' => 'USA',
    'friends' => 'John',
  ),
  'JAMES' => array(
    'age' => '20',
    'country' => 'USA',
    'friends' => 'John',
  ),
);

if (isset($persons[strtoupper($_REQUEST['name'])])) {
  $name = strtoupper($_REQUEST['name']);
  $person = $persons[$name];
  echo build_html($name, $person);
} else {
  echo strtoupper($_REQUEST['name']);
  echo '<div>Sorry, This person not found!</div>';
}

function build_html($name, $person) {
  $html = '<div>';
  $html .= '    <h3>';
  $html .= $name;
  $html .= '    </h3>';

  $html .= '    <ul>';
  $html .= '        <li>Age:';
  $html .= $person['age'];
  $html .= '        </li>';

  $html .= '        <li>country:';
  $html .= $person['country'];
  $html .= '        </li>';

  if (isset($person['evaluate'])) {
        $html .= '<li>Evaluate:';
        $html .= '    <ol start="1">';
        foreach ($person['evaluate'] as $line) {
          $html .= '<li>'. $line .'</li>';
        }
        $html .= '</ol>';
        $html .= '</li>';
    }
  if (isset($person['friends'])) {
      $html .= '<li>';
      $html .= $person['friends'] .'</li>';
    }

  $html .= '</ul>';
  $html .= '</div>';

  return $html;
}
?>

当我们在浏览器中以 GET 方式访问 a.php?name=James 时，就会得到James的信息。
前端代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Personal Information</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#letter-a a').click(function (event) {
                event.preventDefault();
                $('#container').load($(this).attr('href'));
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <div class="letter" id="letter-a">
            <h3><a href="a.php?name=John">John</a></h3>
            <h3><a href="a.php?name=Rose">Rose</a></h3>
            <h3><a href="a.php?name=James">James</a></h3>
        </div>
        <div id="container">
        </div>
    </div>
</body>
</html>

二、执行 POST 请求

使用POST方法与使用GET方法的HTTP请求几乎是一样的。它们之间最明显的差别就是 GET 是把参数放在 URL 中(即查询字符串),而 POST 则不是。决定使用那一种方法其实很简单，要么遵照服务端代码的约定，要么需要传输大量的数据( GET 方法对传输的数据量有严格的限制).

PHP脚本我们还是用上面执行 GET 时的脚本，前端 HTML 只修改了一个方法名称(将 .get() 改成 .post())。
前端HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Personal Information</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#letter-a a').click(function (event) {
                event.preventDefault();
                var requestData = { name: $(this).text() };
                $.post('a.php', requestData, function (data) {
                    $('#container').html(data);
                });
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <div class="letter" id="letter-a">
            <h3><a href="#">John</a></h3>
            <h3><a href="#">Rose</a></h3>
            <h3><a href="#">James</a></h3>
        </div>
        <div id="container">
        </div>
    </div>
</body>
</html>

三、序列化表单

与服务器交互，经常会提交用户填写的表单。常规的表单提交机制会在整个浏览器窗口中加载响应，而 jQuery 的 Ajax 工具则能够异步地提交表单，并将响应放到当前页面中。
服务端PHP(b.php)代码稍加改动：

<?php
$persons = array(
  'JOHN' => array(
    'age' => '20',
    'country' => 'USA',
    'evaluate' => array(
      'A good man!',
      'A rich man!',
      'A foolish man!',
    ),
    'friends' => 'Rose,James',
  ),
  'ROSE' => array(
    'age' => '20',
    'country' => 'USA',
    'friends' => 'John',
  ),
  'JAMES' => array(
    'age' => '20',
    'country' => 'USA',
    'friends' => 'John',
  ),
);

$output = array();
foreach ($persons as $name => $person) {
	if (strpos($name, strtoupper($_REQUEST['name'])) !== FALSE) {
	$output[] = build_html($name, $person);
	}
}

if (!empty($output)) {
		echo implode("\n", $output);
	} else {
		echo '<div class="entry">Sorry, no person found for ';
		echo '<strong>' . $_REQUEST['name'] . '</strong>.';
		echo '</div>';
}

function build_html($name, $person) {
  $html = '<div>';
  $html .= '	<h3>';
  $html .= $name;
  $html .= '	</h3>';

  $html .= '	<ul>';
  $html .= '		<li>Age:';
  $html .= $person['age'];
  $html .= '		</li>';

  $html .= '		<li>country:';
  $html .= $person['country'];
  $html .= '		</li>';

  if (isset($person['evaluate'])) {
		$html .= '<li>Evaluate:';
		$html .= '	<ol start="1">';
		foreach ($person['evaluate'] as $line) {
		  $html .= '<li>'. $line .'</li>';
		}
		$html .= '</ol>';
		$html .= '</li>';
	}
  if (isset($person['friends'])) {
      $html .= '<li>';
      $html .= $person['friends'] .'</li>';
    }

  $html .= '</ul>';
  $html .= '</div>';

  return $html;
}
?>

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Personal Information</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#letter-a form').submit(function (event) {
                event.preventDefault();
                $.get('b.php', { 'name': $('input[name="name"]').val() },
                    function (data) {
                        $('#container').html(data);
                    });
            });
        });
    </script>
</head>
<body>
    <div class="letter" id="letter-a">
        <h3>Form Data</h3>
        <form action="f.php">
            <input type="text" name="name" value="" id="name" />
            <input type="submit" name="search" value="search" id="search" />
        </form>
    </div>
    <div id="main">
        <div id="container">
        </div>
    </div>
</body>
</html>

以上虽然也实现了功能，但是通过名称属性逐个搜索输入字段并将字段的值添加到对象中总是有点麻烦。特别是随着表单变得更复杂，这种方法也会明显变得缺乏扩展性。jQuery 提供了一种简化的方式: .serialize() 方法。
这个方法作用于一个 jQuery 对象，将匹配的 DOM 元素转换成能够随 Ajax 请求传递的查询字符串。
将上面的提交处理程序稍加修改，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Personal Information</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#letter-a form').submit(function (event) {
                event.preventDefault();
                var formValues = $(this).serialize();
                $.get('b.php', formValues, function (data) {
                    $('#container').html(data);
                });
            });
        });
    </script>
</head>
<body>
    <div class="letter" id="letter-a">
        <h3>Form Data</h3>
        <form action="f.php">
            <input type="text" name="name" value="" id="name" />
            <input type="submit" name="search" value="search" id="search" />
        </form>
    </div>
    <div id="main">
        <div id="container">
        </div>
    </div>
</body>
</html>