jquery+php+mysql 如何提交后不转页局部刷新?
网站是PHP+MYSQL的一个新增产品的页面，让用户选择分类<select＞，但当前产品未新增相关分类....想在最后一个option中显示"建立新分类"然后就出现一个i...
网站是PHP+MYSQL的
一个新增产品的页面，让用户选择分类<select ＞，但当前产品未新增相关分类.... 想在最后一个option中显示"建立新分类"
然后就出现一个input框及一个提交按钮
输入完成后点提供或ENTER，就会提交更新(此时不刷新整页)
但提交后...成功发布之后，就把之前本来的<select＞ 刷新一下，令到新的分类就出现了
请问要如何做到?
如真的想帮手，请给点代码，PHP/HTML都比较熟，但JS非常烂 展开
一个新增产品的页面，让用户选择分类<select ＞，但当前产品未新增相关分类.... 想在最后一个option中显示"建立新分类"
然后就出现一个input框及一个提交按钮
输入完成后点提供或ENTER，就会提交更新(此时不刷新整页)
但提交后...成功发布之后，就把之前本来的<select＞ 刷新一下，令到新的分类就出现了
请问要如何做到?
如真的想帮手，请给点代码，PHP/HTML都比较熟，但JS非常烂 展开
展开全部
这个不难， 给你做一个演示文件， 你稍等！
<?php
session_start(); //打开session
error_reporting(E_ALL ^ E_NOTICE); //忽略错误
$Oldification = $_SESSION['classification'];
$m = $_POST['mm'];
!empty( $m ) or $m = 0;
if ( $m == 1 ) { //如果$m的值会等于1， 说明表单已经提交 （ 再这里其实是js的Ajax提交的post数据， 和表单以post方式提交是一样的道理， 也是一样的写法
$classification = $_POST['classification']; //取得发送来的分类名称
//下面的代码我用session来进行保存， 你自己根据你自己的情况， 是保存到数据库也好，其他的也好， 随便你了
sizeof( $Oldification ) or $Oldification = array();
array_push( $Oldification, $classification );
$_SESSION['classification'] = $Oldification;
echo '<option value="">--请选择--</option>';
foreach( $Oldification as $op ) {
echo '<option value="', $op, '">', $op, '</option>';
}
echo '<option value="increase">增加分类</option>';
die;
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分类演示文件</title>
<style type="text/css">
<!--
*{font-family:'新宋体';font-size:13px;}
div.fen{width:300px; margin:100px auto;}
-->
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
<!--
var keyCodes = false; //初始化一个变量， 设置为false， 当是这个值的时候， 捕获键盘事件， 反之则不捕获
$(document).ready(function(e) {
var sel = $('select.fenlei'); //取得下拉框对象
sel.change(function(){ //给下拉框绑定change事件， 也就是下拉框选择不同的值的时候触发的js事件
if ( $(this).val() == 'increase' ) { //如果选中的值等于increase
$(this).find('option:first').prop('selected', 'selected');; //重置下拉框
keyCodes = true;
var html = '<div id="fugai"><\/div><div id="input">分类名称：<input type="text" id="Classification"><button type="button" id="submit">提交<\/button><button type="button" id="Cancel">取消<\/button><\/div><\/div>'; //设置变量， 变量值为一个输入框和一个提交按钮
$('body').append( html ); //将输入框和提交按钮追加到body标签最后面
$('#fugai').hide().css({'position':'absolute', 'z-index':'100', 'left':'0px', 'top':'0px', 'width':'100%', 'height':'100%', 'background':'#000'}).fadeTo('slow', 0.2); //给追加的第一个div标签设置成遮罩层
$('#input').hide().css({'position':'absolute','z-index':'1000', 'background':'#fff', 'border':'solid 3px #d7d7d7', 'padding':'20px'}); //将追加的第二个div标签设置成浮动层
var width = $('#input').width(), height = $('#input').height(), left = ( $(window).width() - width ) / 2, top = ( $(window).height() - height ) / 3; //计算浮动层的上距离和左距离
$('#input').css({'top' : top + 'px', 'left' : left + 'px'}).fadeTo('slow', 1); //设置浮动层居中
$('#Cancel').click(function(){ //给取消按钮绑定点击事件
$('#input').fadeTo('slow', 0, function(){ $(this).remove(); })
$('#fugai').fadeTo('slow', 0, function(){ $(this).remove(); })
keyCodes = false;
//将浮动层和遮罩层淡入并删除
});
$('#submit').click(function(){ //给提交按钮绑定点击事件
var Obj = $('#Classification'); //获取输入框对象
var Val = Obj.val().replace(/\s/gi, ''); //取得输入框的值，并过滤空格
if ( Val == '' ) { //如果没有输入值
alert('请输入分类名称'); //弹出警告框
Obj.focus(); //使输入框获得焦点
} else {
$.post(document.URL.replace(/\#/gi, ''), {mm : 1, classification : Val}, function( Success ) { //Ajax方式以post提交数据至当前页面进行数据处理， 并返回数据处理结果 Success
$('select.fenlei').html( Success ); //将数据处理结果以html代码的方式重新更新下拉框
$('#Cancel').click();
});
}
});
$(document).keyup(function(event){ //绑定键盘按下后弹起事件
if ( keyCodes && event.keyCode == 13 ) { //键盘捕获开关打开， 并且按下的是回车键
$('#submit').click();//触发提交按钮的点击事件， 这样就达到了回车提交的目的
}
});
}
});
});
//js代码部分完成
//-->
</script>
</head>
<body>
<div class="fen">请选择分类
<select name="fenlei" class="fenlei">
<option value="">--请选择--</option>
<?php
//这里你可以根据你自己的情况设置下拉框选项， 比如读取数据库数据。但上下两个不能少， 否则无法触发js事件
foreach( $Oldification as $op ) {
echo '<option value="', $op, '">', $op, '</option>';
}
?>
<option value="increase">增加分类</option>
</select>
</div>
</body>
</html>
追问
最终我考虑到多选的原因
最终改用checkbox来选分类
但仍然非常谢谢你
我会按照你的这个尝试修改
追答
呵呵呵！
没关系，网友的回答本来就是个参考而已！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这样，首先在HTML上写上一个你要完成的内容，然后用JS出发~这个我觉得你应该没问题吧~然后在点解enter的时候把输入的内容获取下来（JS实现）。然后通过AJAX获取到，然后用ajax上传到PHP中，用PHP插入数据库中，然后返回数据，再通过AJAX刷新网页，这里给出你AJAX的代码（用的是JQ的）：
$(function(){
$.ajax({
url: 'in.php', //把数据传给的PHP文件
type: 'post', //上传类型，这里用post就可以了~
dataType: 'json', //数据类型，就是要传的类型建议用JSON当然也可以用XML随你喜欢
data: {param1: 'value1'}, //这是要传输的数据了，这里改成你要传的数据
success：function(msg){
//这里的msg就是你AJAX成功后返回的数据了~你可以用JS把他们放到对应的位置上去
}
});
});
追问
谢谢你
追答
额……不客气~完全被楼上折服了！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用ajax保存新建的分类，成功之后用js选中新的分类
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
