Ajax使用Json进行前后端交互问题

Suvigo 发布于 2016/05/18 17:47
阅读 2K+
收藏 0

我打算做一个上传文件检验里面数据的功能,现在页面上传文件在本地测试校验数据算法正确。

现在本地做了一个简易模型,主要是想点击上传文件用Ajax异步请求直接显示成功多少条数据,失败多少条数据。

页面代码如下:

后端是用PHP写的,在最后的时候,是返回的响应:

但是现在选择上传文件,点击上传文件之后,完全没有反应,页面直接刷新了,而且不显示条数。

请问有什么错误吗?

加载中
0
月色鸢尾
月色鸢尾
$("#success_number").val(data);改成$("#success_number").html(data);试试
S
Suvigo
谢谢您的回复 不过还是没有反应
0
blindcat
blindcat
input type="submit"改成type="button"
S
Suvigo
可能是我其他地方写的有问题,谢谢您了。
0
ZeRur
ZeRur
ajaxsubmit 异步提交 普通的ajax不行
S
Suvigo
好的,谢谢您
0
公孙二狗
公孙二狗

Ajax 上传文件没这么简单,推荐看 jquery fileupload 插件http://plugins.jquery.com/blueimp-file-upload/

S
Suvigo
好的,谢谢您。
0
H
Handsome2734

document.getElementById('filename');

我怎么没看到你有id是filename的元素?

S
Suvigo
抱歉了,我这个图截得比较早,后来加上了id=filename的。。 不好意思
0
分流砥柱
分流砥柱
你以为把filename 传到后台就等于文件传到后台了吗?建议你查查资料,你这样写是不对的,要么使用传统的表单提交,要么使用FormData.即使插件也是这两种。
S
Suvigo
不是,是后台PHP用的Excel库,可以通过文件名load文件。 这个文件现在是在本地测试3个文件都在同一个文件夹,只是测试一下可能性。 多谢回复,可能我还需要改一些吧。
0
WolfX
WolfX

form默认提交之后会跳转页面,h5之前的ajax不能上传文件,可以利用target阻止页面跳转.

也可以利用h5的新api上传文件:<<初识html5 File API实现带有进度提示的文件上传>>

http://my.oschina.net/wolfx/blog/657518

0
eechen
eechen
老旧的浏览器(比如IE8)不支持FormData,所以只能用传统的form表单上传.

用form+iframe模拟AJAX异步上传:
upload.php
<?php
if(isset($_POST['submit']) && !empty($_FILES['file'])) {
	move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
	header('Content-Type: text/html; charset=utf-8');
	echo '<style>* {padding: 0;margin: 0;}</style>';
	echo '<img src="uploads/'.$_FILES['file']['name'].'" width="100%" height="100px"/>';
	exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery "AJAX" upload</title>
<style>
* {
	margin: 0;
	padding: 0;
}
#con {
	width: 360px;
	margin: 10px;
}
input {
	display: block;
	margin: 10px;
}
</style>
</head>
<body>
<div id="con">
	<h1>Hello LAMP</h1>
	<form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post" enctype="multipart/form-data" target="ul_frame">
		<input type="file"   name="file" class="file" />
		<input type="submit" name="submit" value="上传" class="submit" />
		<iframe name="ul_frame" class="ul_frame" src="" frameborder=0 scrolling="no"
		 style="display:none;border:1px solid #AAAAAB;width:100px;height:100px;"></iframe>
	</form>
</div>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
	$('input.submit').click(function(){
		$('iframe.ul_frame').show();
	});
});
</script>
</body>
</html>



eechen
eechen
用form+iframe模拟AJAX异步上传的思路就是:form的target设为页面内的一个iframe,让这个iframe显示action请求后的内容.
0
小号然
小号然
我有个跟你类似的问题DWR+Ajax,为什么在执行hql语句时程序停止? 为什么我在使用DWR+AJAX的时候,我想在数据库里查数据,Hibernate的hql语句执行不了? 下面是我在dwr.xml文件中配置要执行的类里的方法,其中用到了PersonManage类 public boolean checkName(String userName){ PersonManage personManage = new PersonManage(); System.out.println("执行1"); System.out.println(userName); boolean flag = personManage.isUserExist(userName); System.out.println("执行3"); if(flag){ return true; }else{ return false; } } PersonManage类中的查询数据库方法 问题也就出现在这,这里的userList = this.getHibernateTemplate().find(hql);不执行 public boolean isUserExist(String userName){ boolean flag = true; String hql = "from User as user where user.userName =" +userName; System.out.println("执行2"); System.out.println(userName); try{ List userList = new ArrayList(); System.out.println("ul1大小" +userList.size()); userList = this.getHibernateTemplate().find(hql); System.out.println("ul2大小" +userList.size()); if(userList.size() > 0){ flag = false; } }catch(RuntimeException re){ throw re; } return flag; } 下面是dwr.xml中的配置
0
搬砖仔
搬砖仔
name=success_number 加个 id=success_number 试下
返回顶部
顶部