• AJAX小结二

    表单相关

    表单的组成部分 表单标签 表单域  表单按钮

    表单域：包含了文本框、密码框、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。

    标签的属性

    标签用来采集数据，标签的属性是用来规定 如何把采集到的数据发送到服务器

    属性值描述
    actionURL地址规定当提交表单时，向何处发送表单数据
    methodget或post规定以何种方式把表单数据提交到 action URL
    enctype

    application/x-www-form-urlencoded

    multipart/form-data

    text/plain

    		规定在发送表单数据之前如何对其进行编码
    target

    _blank

    _self

    _parent

    _top

    framename

    		规定在何处打开 action URL

    1.action 

    action属性的值应该是 后端提供的url接口地址 

    未指定属性值的情况下，action的默认值为当前页面的url地址

    当提交表单后 页面会立即跳转到 action属性指定的URL地址

    2.target

    _blank 在新窗口打开

    _self  默认 在相同的框架中打开

    _parent   在父框架集中打开。(很少用)

    _top 在整个窗口中打开。（很少用）

    framename  在指定的框架中打开。（很少用）

    3.method

    默认使用get

    get 方式适合用来提交少量的、简单的数据

    post 方式适合用来提交大量的、复杂的、包含文件上传的数据。

    在实际开发中，表单post方式使用的最多，很少使用get。例如登录、注册、添加数据等表单操作都需要使用post方式来提交表单。

    html表单a标签，input标签等几种请求ajax提交数据给后台小结
    doc 0星 超过10%的资源 32KB
    下载

    4.enctype

    application/x-www-form-urlencoded  在发送前编码所有字符（默认）

    multipart/form-data  不对字符编码 在使用包含文件上传控件的表单时，必须使用该值

    text/plain  空格转换为 ‘+’ 号 但不对特殊字符编码（很少用）

    表单的同步提交

    点击类型为 submit 的按钮 触发表单提交的操作，从而使页面跳转action URL 的行为，叫做表单的同步提交。

    同步提交的缺点

    1. 同步提交之后 整个页面会发生跳转，到action url 用户体验很差

    2.同步提交之后，页面之前的状态和数据会丢失

    AJAX下的请求方式以及同步异步的区别小结
    pdf 0星 超过10%的资源 43KB
    下载

    解决方案 表单只负责采集数据 Ajax负责将数据提交到服务器。

    $.('#form1').submit(function(e){

            e.preventDefault() // 阻止表单的提交和页面的跳转

            alert('监听到了表单的提交事件')

    })

    $('#form2').on('submit',function(e){

            e.preventDefault() // 阻止表单的提交和页面的跳转

            alert('监听到了表单的提交事件')

    })

    serialize() 

    jQuery提供的函数  可以快速获取表单中的数据  但每个表单必须有 name 属性

    $('#form3').serialize()

    // 调用的结果 :  username=用户名的值&password=密码值

    分享一个收集信息提交评论的案例： 

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>06发布评论案例title>
    6.   <script src="http://www.wsg3096.com/ass/jquery-3.6.0.js">script>
    7.   <link rel="stylesheet" href="http://www.wsg3096.com/ass/initialize.css">
    8.   <style>
    9.     .box1{
    10.       width: 80%;
    11.       margin: 40px auto;
    12.     }
    13.  
    14.     .box2{
    15.       border: 1px solid #2b76ba;
    16.       width: 100%;
    17.       height: 120px;
    18.       border-radius: 8px;
    19.       overflow: hidden;
    20.       margin-bottom: 40px;
    21.     }
    22.  
    23.     .tit{
    24.       color: white;
    25.       background: #2b76ba;
    26.       line-height: 50px;
    27.       width: 100%;
    28.       font-size: 20px;
    29.       padding-left: 16px;
    30.     }
    31.  
    32.     .from{
    33.       height: 40px;
    34.       margin: 12px 20px;
    35.       line-height: 40px;
    36.     }
    37.  
    38.     .from span{
    39.       display: inline-block;
    40.       margin-right: 12px;
    41.       clear: left;
    42.     }
    43.  
    44.     i{
    45.       background: #edeeec;
    46.       border: 1px solid #d7d9d7;
    47.       display: inline-block;
    48.       padding: 0px 20px;
    49.       border-right: none;
    50.       float: left;
    51.       height: 38px;
    52.       border-radius: 6px 0px 0px 6px;
    53.     }
    54.  
    55.     input{
    56.       height: 40px;
    57.       padding-left: 8px;
    58.       border: 1px solid #d7d9d7;
    59.       border-left: none;
    60.       float: left;
    61.       outline: none;
    62.       width: 260px;
    63.       border-radius: 0px 6px 6px 0px;
    64.     }
    65.  
    66.     #sum{
    67.       height: 40px;
    68.       width: 80px;
    69.       background: #1770de;
    70.       border-radius: 4px;
    71.       color: white;
    72.       font-size: 16px;
    73.       border: none;
    74.       float: right;
    75.       cursor: pointer;
    76.     }
    77.  
    78. .comments{
    79.   width: 100%;
    80.   padding: 16px;
    81.   border: 1px solid #e5e5e5;
    82. }
    83.  
    84. .comments-list{
    85.   display: flex;
    86.   justify-content: space-between;
    87.   align-items: center;
    88.   padding: 10px;
    89.   border-bottom: 1px solid #e5e5e5;
    90.  
    91. }
    92.  
    93.     .user{
    94.       font-size: 16px;
    95.       font-weight: 600;
    96.     }
    97.     .address{
    98.       font-size: 12px;
    99.       padding: 4px 6px;
    100.       border-radius: 8px;
    101.       background: #d1f1ff;
    102.     }
    103.  
    104.     .time{
    105.       padding: 4px 12px;
    106.       border-radius: 8px;
    107.       background: #fff6e0;
    108.     }
    109.  
    110.     .left2 span{
    111.        margin-right: 12px;
    112.     }
    113. .comments-text{
    114.   margin-left: 30px;
    115. }
    116.   style>
    117. head>
    118. <body>
    119. <div class="box1">
    120.   <div class="box2">
    121.     <div class="tit">添加你的看法div>
    122.     <form class="from">
    123.       <span>
    124.         <i>昵称i>
    125.         <input type="text"  placeholder="请输入昵称" name="username">
    126.       span>
    127.       <span>
    128.         <i>内容i>
    129.         <input type="text" placeholder="请输入评论" name="content">
    130.       span>
    131.       <span>
    132.         <i>地区i>
    133.         <input type="text" placeholder="请输入所属地区" >
    134.       span>
    135.       <input type="submit" value="提交" id="sum">
    136.     form>
    137.   div>
    138.  
    139.   <div class="comments">
    140.     <div class="comments-list">
    141.       <div class="left2">
    142.         <span class="user">白自在span>
    143.         <span class="address">新疆-天山span>
    144.         <span class="comments-text">入口柔和、酒香四溢span>
    145.       div>
    146.       <div class="right2">
    147.         <span class="time">2022-05-08 16:40:28span>
    148.       div>
    149.     div>
    150.   div>
    151.  
    152. div>
    153.  
    154. <script>
    155.   $(function () {
    156.     function upData(){
    157.       let dataArr = []
    158.       $.ajax({
    159.         type:'GET',
    160.         url:'http://www.liulongbin.top:3006/api/cmtlist',
    161.         //data:{id:1},
    162.         success:function (res) {
    163.           if (res.status !==200) return alert('获取数据失败！')
    164.           let data = res.data
    165.           for (let i = 10;i>0;i--){
    166.             dataArr.push(data[i])
    167.           }
    168.           let showData = []
    169.           $.each(dataArr,function (i,item) {
    170.             //console.log(item)
    171.             showData.push('
      '+item.username+'河南-郑州'+item.content+'
      '+item.time+'
      '      )
    172.           })
    173.           $('.comments').empty().html(showData)
    174.         }
    175.       })
    176.     }
    177.   upData()
    178.  
    179.     $('.from').on('submit',function (e) {
    180.       e.preventDefault()
    181.       let data = $(this).serialize()//获得带有name 的input value
    182.       $.post(
    183.         'http://www.liulongbin.top:3006/api/addcmt',
    184.         data,
    185.         function (res) {
    186.           if (res.status !== 201){
    187.             console.log('新增评论失败')
    188.           }
    189.           upData()
    190.           $('form')[0].reset()// 重置内容 因为是JS原生方法 把JQ对象转成DOM
    191.         }
    192.       )
    193.     })
    194.  
    195.  
    196.  
    197.   })
    198. script>
    199. body>
    200. html>

  • 相关阅读:
    Mac 使用 scp 上传或下载文件/文件夹
    MongoDB的安装
    java计算机毕业设计开放式教学评价管理系统源码+mysql数据库+系统+lw文档+部署
    Unity --- 网格链接与动态障碍物
    Mac M2芯片配置PHP环境
    axios 取消请求:CancelToken
    pdf怎么转换成jpg图片？收藏这几种方法
    设计模式(十一)----结构型模式之装饰者模式
    一、T100应收管理之应收基础数据设置篇
    云开发中关于Container与虚拟机之间的比较
  • 原文地址：https://blog.csdn.net/benlalagang/article/details/126133690