JS获取form表单提交的数据(ajax获取表单提交数据进行请求)

最新推荐文章于 2023-04-22 15:05:53 发布
最新推荐文章于 2023-04-22 15:05:53 发布
阅读量2.5k 收藏 4
点赞数
分类专栏： js Php 文章标签： js ajax html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43140482/article/details/112986035
版权
Php 同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏

JS获取form表单提交的数据(ajax获取表单提交数据进行请求)

开发说明

这次用原生的php和js开发增删改查的功能，数据是用php遍历的，数据修改有用form表单和ajax去请求，一个页面要修改和删除的请求(数据是遍历的)！修改是用表单提交的，重置密码和删除是用jq获取表单提交的内容，在用ajax提交到php处理数据

在这里插入图片描述

代码

//php遍历数据
<body>
<div  style="margin:0 auto;width:100%">
<div class="col-md-6" style="margin:0 auto;width:100%">
    <table class="table table-hover table-striped" style="margin:0 auto;width:800px" >
        <tr >
            <td colspan="6"><h6><a href="index.php">回首页</a></h6><h1 class="text-center">用户管理</h1></td>
        </tr>
        <tr>
            <td colspan="6"><h4><a href="add.php">新增用户</a></h4></td>
        </tr>
        <tr >
            <td>id</td>
            <td>用户名</td>
            <td>注册时间</td>
            <td>过期时间</td>
            <td>操作</td>
        </tr>
       
        <?php 
            foreach($userlist as $list){
                echo '<form class="form-inline" action="update.php"  method="post" >';
                echo  "<input type='text' style='display:none;' name='id' value=".$list['id'].">";
                echo ' <tr><td>'.$list['id'].'</td>';
                echo '<td>'.$list['username'].'</td>';
                echo '<td>'.date("Y-m-d",$list['createtime']).'</td>';
                echo '<td>'.date("Y-m-d",$list['createtime']+$list['indate']*86400).'</td>';
                echo '<td><button type="submit"  class="btn btn-info">修改</button></form>';
                echo '<form class="form-inline" action=""  οnclick="return deleteFn(this)">';
                echo  "<input type='text' style='display:none;' name='id' value=".$list['id'].">";
                echo '<button type="button" class="btn btn-danger deletebt" οnclick="return deleteFn(this)">删除</button></tr></td></form>';
                
            }
        
        ?>
        
                                
    </table>
</div>
</div>

</body>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript" >

    function deleteFn(form){
			let formData = new FormData(form);
			let id = formData.get('id');
            console.log(id);
            var con;
            con=confirm("确定要删除该用户吗?");
            if(con==true){
                $.ajax({
                url: 'delete.php',
                type:'POST',
                data:{id:id},
                success:function(result){
                    console.log(result);
                    location.reload()
                }
            });
            }
		}
</script>
</html>
小悲伤.LQ
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue form 表单提交+ajax异步请求+分页效果
08-30
主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
JS获取表单数据
热门推荐
weixin_44594267的博客
07-24 1万+
文章目录方法1：在input标签中加id，获取在页面输入的数据方法2：用serialize()方法将表单序列化，获取在页面输入的表单数据方法3：new FormData()方法，获取在页面输入表单数据方法X：待续... 方法1：在input标签中加id，获取在页面输入的数据 step1：在input标签中加id属性，如id=“username” 和 id=“password”。 step2：发送ajax请求，将数据传入后端 step3：在后端获取数据 方法2：用serialize()方法将表单序列化，
js获取form表单数据
zhaofuqiangmycomm的博客
03-01 1万+
1.获取formData对象 let form=document.getElementById("searchForm"); let formData=new FormData(form); console.log("formData",formData)； 2.获取序列化对象 var searchForm = $('#searchForm').serializeArray(); console.log("searchForm",searchForm ) 3.获取json对象 var .
JS表单的获取、表单元素的获取、提交表单
m0_51258512的博客
02-16 1万+
获取表单 document.getElementById(“id属性值”)，通过表单的id属性值获取属性对象 document.表单的name属性值，通过表单的name属性值获取表单对象 document.forms[下标]，通过指定下标获取表单元素 document.forms[表单的name属性值获取]，通过表单的name属性值获取表单对象 document.forms:获取HTML文档中所有的表单对象 <body> <!-- 获取表单(前两种常用) 1..
如何使用 JavaScript/jQuery 获取表单数据？
MyNoName的专栏
02-27 380
是否有一种简单的单行方式来获取表单数据，就像以经典的纯 HTML 方式提交一样？例如：输出：像这样的东西太简单了，因为它没有（正确地）包括文本区域、选择、单选按钮和复选框：});
python网页提交表单_form表单提交方式
weixin_39994461的博客
11-24 308
如果通过form表单提交请求服务端去下载文件，这时当前页面不会发生跳转，服务端返回void，通过response 去写文件数据，页面会显示下载文件。@RequestMapping(value = "/url")public void exportFile(HttpServletRequest req, HttpServletResponse response, String rptId)throw...
jquery序列化form表单使用ajax提交后处理返回的json数据
10-26
主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下
Javascript 详解封装from表单数据为json串进行ajax提交
12-11
摘要: js封装from表单数据为json串进行ajax提交 json封装代码 function getFormJson(frm) { //frm：form表单的id var o = {}; var a = $("#"+frm).serializeArray(); $.each(a, function() { if (o[this.name]...
layui实现form表单同时提交数据和文件的代码
12-30
form class=layui-form id=userForm lay-filter=deptForm enctype=mutipart/form-data> <input type=hidden name=id> <div class=layui-form-item> <label class=layui-form-label
Html 表单提交 【js获取表单提交数据】
daifeng的博客
12-11 3755
Html 原生获取表单提交数据 // 提示框 淡入淡出 <style type="text/css"> .message { display: none; padding: 20px; position: fixed; top: 40%; left: 40%; border-radius: 5px; background: rgba(0, 0, 0, 0.5); .
利用JS如何获取form表单数据
12-29
前言 本文主要给大家介绍的是关于利用JS获取form表单数据的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧 方法如下： 1.有的时候想偷点懒，页面上有大量的表单提交数据，每次单独获取都比较麻烦。代码冗余度也比较多，因此封装了一个方法。 2. 表单元素必须要有name属性，name属性是向后端提交的字段数据。 3.html代码 下拉框 <select name=sel id=sel class=query> sel-1 <option value =sel-2
前端学习--Ajax(2) form表单
Michelle209的博客
04-22 1339
get 在请求的url会体现数据，Query String Parameters中会解析url中的数据。application/x-www-form-urlencoded 默认值，表示发送前编码所有字符。点击submit按钮触发表单提交的操作，使页面跳转到action URL的行为。-- 向何处发送表单数据 如果不写默认是当前页面url。-- 以何种方式把表单提交到action的url。解决：表单只采集数据，ajax将数据提交到服务器。-- 在何处打开action的url。-- 发送数据前如何对数据编码。
使用Visual Studio 2015完成表单的自动提交方式
weixin_57726512的博客
06-18 648
今天我们将使用Visual Studio 2015来完成一个表单提交，同时我们还需要使用到bootstrap和jQuery插件。 首先布局页面我们在一个div标签中嵌套一个form标签，form标签嵌套四个div标签。 第一个div标签中包含有label标签和一个input标签，label标签中的是“姓名”input标签则是用来接收传入的数据的 ...
js ajax实现搜索,JS+Ajax实现百度智能搜索框
weixin_30421043的博客
08-05 440
JS+Ajax实现百度智能搜索框2019-01-01编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了JS+Ajax实现百度智能搜索框，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。首先浏览实现后的结果，输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。实现所需要的主要是ajax+js。前端search.jspIn...
搜索框输入内容，动态显示提示（ajax）
zhh_1998的博客
03-26 911
搜索框输入内容，利用ajax动态显示提示 即当我们在搜索框中输入一个a时，当且仅当我们输入完a后，搜索框可以提示我们aa,或者abc等等，我们也可以选定aa,abc等等 搜索框和提示内容的处理代码： <div align="center"> <br> <form action="QueryByCondition2" method="post...
nodejs提交form表单并将提交信息显示在页面上
我们都在成长
04-02 3773
1.打开webstorm，新建project，新建index.js。 2.输入地址localhost：1337/  出现结果如下： 3.输入username和password，点击提交结果如下图：   index.js代码如下： var http = require("http"); var server = http.createServer();
视频网站开发：Ajax异步实现搜索输入框的提示功能
qq_35750547的博客
10-31 746
在我们实际项目的开发中，有时候一个小小的功能，可能都需要考虑很长的时间，因为必须把这个小功尽可能的做好做到极致。我的视频网站从2018年年初做到现在，已经历经了多半年的时光。由开始的功能单一，只能实现海量视频的展示及免广告播放功能；到现在的花样繁多，除了开始的功能以外，还可以实现海量视频的搜索功能，网站的注册登录找回密码功能，发表对影视的评论及回复功能，视频的收藏功能，记录网站的访...
【网页-JQuery】通过Js获取表单提交的数据。
能看代码的CrackLibby
04-20 5798
https://zhidao.baidu.com/question/550893193.html&lt;html&gt; &lt;body&gt; &lt;form method='post' action=''&gt; &lt;label for='inputText'&gt;inputText&lt;/label&gt; &lt;input type='...
html表单如何获取数据,利用JS如何获取form表单数据
weixin_39827589的博客
06-04 1183
前言本文主要给大家介绍的是关于利用JS获取form表单数据的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧方法如下：1.有的时候想偷点懒，页面上有大量的表单提交数据，每次单独获取都比较麻烦。代码冗余度也比较多，因此封装了一个方法。2. 表单元素必须要有name属性，name属性是向后端提交的字段数据。下拉框sel-1sel-2输入框密码框单选框单选1单选2单选3复选框复选...
form表单提交数据ajax
最新发布
04-27
因此，AJAX可以在不刷新整个页面的情况下，将表单数据发送到服务器并获取服务器返回的数据。 当使用 Ajax 技术提交表单数据时，我们需要做以下几个步骤： 1. 监听表单的 submit 事件，并阻止表单默认的提交行为； 2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值