ajax如何接收form表单;怎么接收ajax传的json数据

Ajax如何接收form表单和传递json数据

一、Ajax简介

Ajax（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据交换的技术。它可以在页面不刷新的情况下，向服务器发送请求并接收响应，从而实现动态更新页面内容的功能。Ajax可以通过多种方式发送请求和接收响应，其中包括接收form表单和传递json数据。

二、如何接收form表单

接收form表单的方式有两种：一种是使用jQuery的$.ajax()方法，另一种是使用原生的XMLHttpRequest对象。下面分别介绍这两种方式的实现方法。

1. 使用jQuery的$.ajax()方法

使用$.ajax()方法可以方便地发送Ajax请求，并且可以自动将form表单中的数据序列化为一个字符串，然后以POST方式发送到服务器。代码如下：

$(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'server.php',
      data: $(this).serialize(),
      success: function(data) {
        alert(data);
      }
    });
  });
});

上面的代码中，$(this).serialize()方法会将form表单中的数据序列化为一个字符串，然后作为data参数发送到服务器。服务器返回的响应数据会在success回调函数中处理。

2. 使用XMLHttpRequest对象

使用原生的XMLHttpRequest对象也可以接收form表单数据。代码如下：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'server.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    alert(xhr.responseText);
  }
};
xhr.send(new FormData(document.querySelector('form')));

上面的代码中，FormData对象可以将form表单中的数据转换为一个键值对的对象，然后使用send()方法发送到服务器。服务器返回的响应数据会在onreadystatechange回调函数中处理。

三、如何接收Ajax传的json数据

接收Ajax传的json数据也有两种方式：一种是使用jQuery的$.ajax()方法，另一种是使用原生的XMLHttpRequest对象。下面分别介绍这两种方式的实现方法。

1. 使用jQuery的$.ajax()方法

使用$.ajax()方法可以方便地发送Ajax请求，并且可以自动将服务器返回的json数据解析为一个JavaScript对象。代码如下：

$(function() {
  $.ajax({
    type: 'GET',
    url: 'server.php',
    dataType: 'json',
    success: function(data) {
      alert(data.name);
    }
  });
});

上面的代码中，dataType参数指定了服务器返回的数据类型为json，$.ajax()方法会自动将服务器返回的json数据解析为一个JavaScript对象。服务器返回的响应数据会在success回调函数中处理。

2. 使用XMLHttpRequest对象

使用原生的XMLHttpRequest对象也可以接收Ajax传的json数据。代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'server.php', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    alert(data.name);
  }
};
xhr.send();

上面的代码中，setRequestHeader()方法可以设置请求头，指定请求的数据类型为json。JSON.parse()方法可以将服务器返回的json数据解析为一个JavaScript对象，然后在onreadystatechange回调函数中处理。

本文介绍了两种接收form表单和传递json数据的方式，分别是使用jQuery的$.ajax()方法和原生的XMLHttpRequest对象。无论使用哪种方式，都可以方便地实现Ajax请求和响应的功能，从而实现动态更新页面内容的效果。