Ajax相关(form表单)知识

目录

什么是Ajax以及其作用

jQuery中的相关语法

form表单

---

什么是Ajax以及其作用

Ajax全名是Asynchronous Javascript And XML(异步JavaScript 和XML)

在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式。

Ajax可以检测用户名是否被占用，加载搜索提示列表，数据的增删改查等。

jQuery中的相关语法

jQuery中对XML进行了封装，提供了一系列的函数，极大降低了使用难度。比如

$.get()可以是带参数和不带参数的请求，主要用于从服务器得到数据

            $('#btnGET').on('click', function() {

                $.get('http://www.test.com/api/getbooks', {

                    id: 1

                }, function(res) {

                    console.log(res)

                })

            })

$.post()主要用于从服务器提交数据

      $('#btnPOST').on('click', function () {

        $.post('http://www.test.com/api/addbook', 
{ bookname: '西游记', author: '吴承恩', publisher: '图书出版社' }, 
          function (res) {

          console.log(res)

        })

      })

$.ajax()综合了get和post两种方式。  

    $('#btnGET').on('click', function () {

        $.ajax({

          type: 'GET',

          url: 'http://www.test.com/api/getbooks',

          data: {

            id: 1

          },

          success: function (res) {

            console.log(res)

          }

        })

      })

 $('#btnPOST').on('click', function () {

        $.ajax({

          type: 'POST',

          url: 'http://www.test.com/api/addbook',

          data: {

            bookname: '史记',

            author: '司马迁',

            publisher: '上海图书出版社'

          },

          success: function (res) {

            console.log(res)

          }

        })

      })

form表单

表单的特点是：同步提交，提交后，整个页面会发生跳转，并且页面之前的状态和数据都会丢失。因此解决方案是表单只负责采集数据，Ajax负责将数据提交到服务器。因此当我们监听到表单的提交事件以后，需要调用对象的e.preventDefault()来阻止表单的提交和页面的跳转

用于采集用户输入的信息，并把采集到的信息提交到服务器端进行处理

•  action 未指定的情况下，默认为当前页面的URL地址，注意的是当提交表单后，页面会立即跳转到action属性指定的URL地址
• target用来规定在何处打开URL，默认是在相同的框架中打开，也可以在新窗口中打开。
•  method可选值get和post，get方式用于提交少量的简单的数据。post方式适合用来提交大量的，复杂的，或包含文件上传的数据。因此实际上传开发过程中，采用POST
• enctype用来规定对数据进行编码。举例说明

   $('#formAddCmt').submit(function(e) {//监听一个form表单的提交事件

        e.preventDefault()//阻止默认的提交行为

        var data = $(this).serialize()//获得表单中的所有的数据

        $.post('http://www.test.com/api/addcmt', data, function(res) {

            if (res.status !== 201) {

                return alert('发表评论失败！')

            }

            getCommentList()//调用其他方法

            $('#formAddCmt')[0].reset()//将表单中的所有数据全部重置

        })

    })