、いるFormData方法
役割:
- アナログHTMLフォームは、フォームオブジェクト、自動的にリクエストパラメータのフォーマットにスプライシングデータ形式のオブジェクトにHTMLフォームをマッピングすることと等価です。
- 非同期アップロードバイナリファイル
使用
-
ネイティブAJAXの使用
<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="button"/> </form>
var form = document.getElementById('form'); // 将html表单转换为formData表单对象 var formData = new FormData(form ); // 创建ajax对象 var xhr = new XMLHttpRequest(); // 对ajax对象进行配置 xhr.open('post', 'http://localhost:3001/login'); // 当发送跨域请求时,携带cookie信息 xhr.withCredentials = true; // 发送请求并传递请求参数 xhr.send(formData); // 监听服务器端给予的响应内容 xhr.onload = function () { console.log(xhr.responseText); }
サーバー側:
app.post('/login', (req, res) => { // 创建表单解析对象 var form = formidable.IncomingForm(); // 解析表单 form.parse(req, (err, fields, file) => { // 接收客户端传递过来的用户名和密码 const { username, password } = fields; // 用户名密码比对 if (username == 'test' && password == '123456') { // 设置session req.session.isLogin = true; res.send({message: '登录成功'}); } else { req.session.isLogin = false; res.send({message: '登录失败, 用户名或密码错误'}); } }) })
注意:
- オブジェクトが送信プロセスに渡される必要があるため、要求オブジェクトは、使用することはできません取得FORMDATA、GETリクエストとリクエストパラメータは、リクエストアドレスの裏側にのみ実施例を示します。
- BodyParserサーバーモジュールはFORMDATAフォームデータオブジェクトを解決できない、我々は解決にとって素晴らしいモジュールを使用する必要があります。
-
jqueryのを使用します
<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="button"/> </form>
let form = document.querySelector('#form'); $.ajax({ type:"post", url:"/login", data:formData, success:function(res){ }, processData: false, contentType: false, error:function(xhr){ console.log(xhr) } })
サーバー側:
app.post('/login', (req, res) => { // 创建表单解析对象 var form = formidable.IncomingForm(); // 解析表单 form.parse(req, (err, fields, file) => { // 接收客户端传递过来的用户名和密码 const { username, password } = fields; // 用户名密码比对 if (username == 'test' && password == '123456') { // 设置session req.session.isLogin = true; res.send({message: '登录成功'}); } else { req.session.isLogin = false; res.send({message: '登录失败, 用户名或密码错误'}); } }) })
二、SerializeArray方法
役割:
- データは自動的に形成するために接合されます配列
使用
- ネイティブAJAXの使用(JSON形式のデータ送信)
<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit"/> </form>
サーバー側:function serialize2Json(form) { var result = {}; // [{name: 'email', value: '用户输入的内容'}] var f = form.serializeArray(); f.forEach(function(item) { // result.email result[item.name] = item.value; }); return result; } $('#form').on('submit', function() { let result = serialize2Json($(this)); //将表单数据转为json格式的数据 // 创建ajax对象 var xhr = new XMLHttpRequest(); // 对ajax对象进行配置 xhr.open('post', 'http://localhost:3001/json'); // 当发送跨域请求时,携带cookie信息 xhr.withCredentials = true; // 设置请求参数格式的类型(post请求必须要设置) xhr.setRequestHeader('Content-Type', 'application/json'); // 发送请求并传递请求参数 xhr.send(JSON.stringify(result ));// 将json对象转换为json字符串发送 // 监听服务器端给予的响应内容 xhr.onload = function () { console.log(xhr.responseText); } // return false//默认阻止提交数据跳转 })
app.post('/json', (req, res) => { res.send(req.body); });
- jqueryのを使用します(JSON形式のデータ送信)
<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit"/> </form>
サーバー側:// 将表单中用户输入的内容转换为对象类型 function serializeObject (obj) { // 处理结果对象 var result = {}; // [{name: 'username', value: '用户输入的内容'}, {name: 'password' , value: '123456'}] var params = obj.serializeArray(); // 循环数组 将数组转换为对象类型 $.each(params, function (index, value) { result[value.name] = value.value; }) // 将处理的结果返回到函数外部 return result; } $('#form').on('submit', function() { //将表单数据转为json格式的数据 let result = serialize2Json($(this)); $.ajax({ type:"post", url:"/json", // 向服务器端发送的请求参数 // name=zhangsan&age=100 // data: { // name: 'zhangsan', // age: 100 // }, data: JSON.stringify(result), // 指定参数的格式类型 contentType: 'application/json', success:function(res){ }, error:function(xhr){ console.log(xhr) } }) // return false//默认阻止提交数据跳转 })
app.post('/json', (req, res) => { res.send(req.body); });
三、Serializeメソッド
役割:
- データは自動的に形成するために接合されます文字列型パラメータ
注:(パラメータ名=&パラメータ名パラメータ値パラメータ値=)
使用
- ネイティブAJAXの使用
ポストリクエストメソッド<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit"/> </form>
サーバー側:$('#form').on('submit', function() { var params = $('#form').serialize();// username=''&age='' // 创建ajax对象 var xhr = new XMLHttpRequest(); // 对ajax对象进行配置 xhr.open('post', '/test'); // 当发送跨域请求时,携带cookie信息 xhr.withCredentials = true; // 设置请求参数格式的类型(post请求必须要设置) xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 发送请求并传递请求参数 xhr.send(params);// // 监听服务器端给予的响应内容 xhr.onload = function () { console.log(xhr.responseText); } // return false//默认阻止提交数据跳转 })
リクエストメソッドを取得app.post('/test', (req, res) => { res.send(req.body); });
サーバー側:$('#form').on('submit', function() { var params = $('#form').serialize();// username=''&age='' // 创建ajax对象 var xhr = new XMLHttpRequest(); // 对ajax对象进行配置 xhr.open('get', 'http://localhost:3001/test?'+params); // 当发送跨域请求时,携带cookie信息 xhr.withCredentials = true; // 发送请求并传递请求参数 xhr.send();// // 监听服务器端给予的响应内容 xhr.onload = function () { console.log(xhr.responseText); } // return false//默认阻止提交数据跳转 })
app.get('/test', (req, res) => { res.send(req.query); });
- jqueryのを使用します
ポストリクエストメソッド<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit"/> </form>
サーバー側:$('#form').on('submit', function() { //将表单数据转为json格式的数据 var params = $('#form').serialize(); $.ajax({ type:"post", url:"/test", data:params, // 指定参数的格式类型 contentType: 'application/x-www-form-urlencoded', success:function(res){ console.log(res) }, error:function(xhr){ console.log(xhr) } }) // return false//默认阻止提交数据跳转 })
リクエストメソッドを取得app.post('/test', (req, res) => { res.send(req.body); });
サーバー側:$('#form').on('submit', function() { //将表单数据转为json格式的数据 var params = $('#form').serialize(); $.ajax({ type:"get", url:"/test", data:params, success:function(res){ console.log(res) }, error:function(xhr){ console.log(xhr) } }) // return false//默认阻止提交数据跳转 })
app.get('/test', (req, res) => { res.send(req.query); });