jQuery中使用Ajax请求接口提交表单和遍历表格

最新推荐文章于 2024-07-15 22:52:27 发布

三线码工

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量622

点赞数 1

分类专栏： JavaScript 文章标签： jquery ajax vue.js

本文链接：https://blog.csdn.net/qq_35946021/article/details/127664028

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

现在大家都是使用Vue等框架去完成项目，但是前几天有个静态的网站是用jQuery和Amaze UI完成的，其中只需要对接两个接口，一个是提交客户信息，一个是查看客户提交的信息。此功能十分基础，但是也花了一个小时才搞定，jQuery基本忘光了，记录一下。

 <form class="am-form">
                    <div class="am-g">
                      <div class="am-u-md-6">
                        <input type="text" class="" id="doc-ipt-email-1" placeholder="姓名" required>
                      </div>
                      <div class="am-u-md-6">
                        <input type="email" class="" id="doc-ipt-email-2" placeholder="Email" required>
                      </div>
                    </div>

                    <div class="am-g">
                      <div class="am-u-md-6">
                        <input type="tel" class="" id="doc-ipt-email-3" placeholder="电话" required>
                      </div>
                      <div class="am-u-md-6">
                        <div class="am-form-group" style="background: #fcfcfc;">
                          <select id="doc-select-1" style="width: 100%;font-size: 16px;line-height: 20px;padding: 15px 20px;border-radius: 3px;color: #262626;border: 2px solid #e9e9e9;">
                            <option value="我有需求">我有需求</option>
                            <option value="产品咨询">产品咨询</option>
                            <option value="业务合作">业务合作</option>
                          </select>
                          <span class="am-form-caret"></span>
                        </div>
                      </div>
                    </div>

                    <div class=am-g>
                      <div class="am-u-md-12" style="padding: 1rem;">
                        <div class="am-form-group">
                          <textarea class="" rows="5" id="doc-ta-1" placeholder="写下您想说的..." required></textarea>
                        </div>
                      </div>
                    </div>

                    <div class="am-g">
                      <div class="am-u-md-9">
                        
                      </div>
                      <div class="am-u-md-3">
                        <p><span id="btn"  class="am-btn am-btn-default btn-reguest am-fr btn-fl" >提交</span></p>
                      </div>
                    </div>
                  </form>

HTML写好了首先要获取input输入框的内容和select的值。然后使用Ajax请求讲参数传给后端。

<script src="../assets/js/jquery-2.1.0.js" charset="utf-8"></script>
  <script src="../assets/js/amazeui.js" charset="utf-8"></script>
  <script>
	  $(function () {
	          $("#btn").click(
	              function () {
	                  //发送ajax请求的代码
					  if(sessionStorage.getItem("upmsg")){
						   alert("你已提交过啦，下次再来！")
						  return
					  }
					  var data={
						  phone:$("#doc-ipt-email-3").val(),
						  real_name:$("#doc-ipt-email-1").val(),
						  email:$("#doc-ipt-email-2").val(),
						  content:$("#doc-ta-1").val(),
						  cooperation:$("#doc-select-1").val()
					  }
					  console.log(data)
					  $.ajax({
					      url:"http://api.XXXX.vip/Api/Index/createMessage" , //请求路径
					      type:"get" , //请求方式
					      data,//请求参数
					      dataType:"json",//设置接受到的响应数据的格式
					      //回调函数
					      success:function (data) {
					          console.log(data);
							  if(data.code==200){
								   sessionStorage.setItem("upmsg",data.real_name)
								  alert("提交成功")
								  window.location.reload()
							  }else{
								  alert(data.message)
							  }
							 
					      },
					      error:function (e) {
					          console.log("出错啦...",e)
							 
					      }//表示如果请求响应出现错误，会执行的这个回调函数
					  
					  })
	              }
	          );
	      });
	  
  </script>

接下来就是列表页，获得数据后需要使用jQuery讲标签拼接起来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="alternate icon" type="image/png" href="../assets/images/favicon.png" />
		<link rel="stylesheet" href="../assets/css/amazeui.css" />


		<script src="../assets/js/jquery-2.1.0.js" charset="utf-8"></script>
		<script src="../assets/js/amazeui.js" charset="utf-8"></script>
	</head>
	<body>
		<table class="am-table am-table-bordered am-table-striped am-table-hover">
		    <thead>
		        <tr>
		            <th>姓名</th>
		            <th>类型</th>
					<th>手机</th>
		            <th>需求</th>
					<th>邮箱</th>
		        </tr>
		    </thead>
		    <tbody id="tbody">
		         
		       
		    </tbody>
			
		</table>
		<script>
			
			  
						var person=prompt("请输入您的名字","");
						if(person=="admin"){
							getlist()
						} 
			         
			              function getlist(){
							  
							  $.ajax({
							      url:"http://api.xxxxx.vip/Api/Index/messageList" , //请求路径
							      type:"get" , //请求方式
							      
							      dataType:"json",//设置接受到的响应数据的格式
							      //回调函数
							      success:function (data) {
							          console.log(data.data.list);
									  var list=data.data.list
									  var trDom=""
									  for (var i = 0; i < list.length; i++) {
									  	  trDom+=`<tr><td>${list[i].real_name}</td><td>${list[i].cooperation}</td>
										  <td>${list[i].phone}</td><td>${list[i].content}</td><td>${list[i].email}</td>
										  </tr>`;
									  								   
									  								 
									  }
									   
									   $("#tbody").html(trDom);
							      },
							      error:function () {
							          console.log("出错啦...")
							      }//表示如果请求响应出现错误，会执行的这个回调函数
							  
							  })
			              }
			           
			      
			  
		</script>
	</body>
</html>