form表单的回调

背景:平时使用的form表单只能单方向提交,不能进行和ajax类似的回调,在这种背景下给大家介绍一下这种新的方法实现form表单的回调

用到的js脚本

 

应用:提交文件到服务器(form表单最简单),同时进行回调。

注,文件提交的代码没写,本案例目标是掌握form表单回调

本文档使用方法:

  1. 把文件放在phpstudy的WWW目录

 

  1. 浏览器访问

 

  1. 成功显示

 

jquery.form.js传送门:http://malsup.github.io/jquery.form.js      点击网页另存为

jquery传送门:https://code.jquery.com/jquery-3.3.1.min.js

1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/jquery.form.js"></script>
</head>
<body>
    <form action="./server.php" id="form1" method="post"  enctype="multipart/form-data">
        <input type="file" id="file_sc" name="file" ><br/>
        提交人:<input type="text" id="name" name="name" ><br/>
            <input type="submit" id="tj" value="提交">
     </form>
<script>
 $("#form1").bind("submit", function(){  
	var file=$("#file_sc").val();
	if(file == ""){  
		alert("请选择文件!!!");
		return false;  
	}  
});
$(function(){
	/** 验证文件是否导入成功  */
	$("#form1").ajaxForm(function(data){  
		if(data=="1"){
			alert("提交成功!");   
		}
	});     
});
</script>
</body>
</html>

server.php代码:

<?php

echo 1;


?>

 

 

 

©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值