博客列表 >表单常用事件,AJAX异步请求之get请求、post请求-2019/7/16

表单常用事件,AJAX异步请求之get请求、post请求-2019/7/16

降落伞的博客
降落伞的博客原创
2019年07月17日 10:43:16760浏览

1、表单常用事件是指如何触发 或者 在什么情况下触发

  • focus,当控件获取焦点时触发;blur,当控件失去焦点时触发;change,当控件的值发生变化且失去焦点时触发;input,每一次值发生变化都会触发;submit,表单提交时触发(现在很少用)。

  • 格式:获取到的控件对象.addEventListener('常用事件', function (ev) {
       ev.target. ……  ;  
    }, false);

    ev是指这个常用事件。

    ev.target是指哪个控件会发生这个事件,这个事件是针对哪个控件而言的。

2、选择表单元素

  • 通过form的name值获取到整个表单var login = document.forms.namedItem('login');

  • 获取表单中的每一个控件可以 基于表单对象获取,比如var email = login.email。但在获取Select里的option元素时,可以先获取到Select元素var remember = login.Select ID,在基于这个和option的name获取,Select ID.namedItem('option ID') ;获取按钮上的文本,先获取按钮元素,然后btn.innerText。

3、AJAX异步请求是区别于通过浏览器URL同步请求的一种方式,不管是GET请求还是POST请求,创建AJAX请求都要遵循4个步骤。

  • 1、创建请求对象var request = new XMLHttpRequest()

  • 2、监听成功的回调。比如当用户输入内容符合要求时,我们要通过AJAX将数据发送服务器,这是会有一个switch判断,在default中(意味着输入符合要求),有一个监听成功回调request.addEventListener('readystatechange', 函数名, false);

    其中,'readystatechange'是一个触发事件,意思是当文档的readyState属性发生改变时会触发。readyState一共有4个值,0: 请求未初始化,1: 服务器连接已建立,2: 请求已接收,3: 请求处理中,4: 请求已完成,且响应已就绪。

    其中,函数内部会有一个判断,当readyState === 4时会执行一个什么操作,

  • 3、设置请求参数。request.open('GET/POST', 'XXXXX.php', true);

    open()方法中,第一个参数是HTTP请求方式,比如GET,POST;第二个参数是URL,指服务器上的文件的路径,该文件可以使任何类型的文件,比如txt、xml、php ;第三个参数为true或false,true表示异步执行,false表示同步执行(不推荐)。

  • 4、发送异步请求。

    1)如果是GET请求,需要先对控件中输入的值进行编码

          var data = encodeURIComponent(input.value),这一步在第三步之前,这个input是用户ID输入框

          此时第三步就会变成request.open('GET', 'XXXX.php?user_id='+data, true);

          第四步,发送请求,request.send(null);

         ( encodeURIComponent():对值中的非法字符进行编码,如空格等,解码:decodeURIComponent())

    2)如果是POST请求

         需要先以表单键值对方式封装需要发送的数据(要在发送请求之前)
                 var data = 'username='+username+'&email='+email+'&password='+password+'&remember='+remember;
         然后设置请求头以表单数据格式发送数据(要在发送请求之前)
                request.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8');
         第四步,发送请求,request.send(data);

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议