ajax返json文弹窗,ajax提交表单，并读取json反馈结果

如果要无刷新的提交数据，还得在后台验证，ajax是良好的选择，但是之前接触的与之相关的项目太少了，所以还得自己多尝试。这个实例是想模仿豆瓣阅读pc版的写作页面，感觉很难，也只实现了一部分功能。那个页面需要同时做到文章的创建，编辑，自动保存，手动保存等一系列高大上的功能，而我只做到了创建和保存，想想还是很心累，看后续的维护吧，不够为了防止以后忘记，决定记录。

后端语言为php，版本为7.1，需要引入jquery。

主要html代码为：

添加文章

当前字数：

这里不需要为form表单设置action值，可能申明method都不需要，但是为了以防万一我还是加上了。

js代码为：

$(function(){

//使用json方式

$("#save").click(function(){ //点击保存按钮开始提交

var cont = {title:$(".article_titlle").val(),concent:$(".article_concent").text()}; //创建数组，获取表单中文本框值。

$.ajax({

url:'bookadd.php', //提交到的后端文件

type:'post', //定义方法

dataType:'json', //数据类型为json

data:cont, //设置数据为之前定义的数组

success:function(data){ //如果成功则读取后台返回的json数据，我返回的是保存时间和保存状态。

var str = data.date+" "+data.info;

$("#result").html(str); //将成功状态呈现在页面上。

},

error:function(data){ //定义如果失败的情况，其它的就不交代了。

var str = data.date+" "+data.info;

$("#result").html("保存失败");

}

});

});

});

js还是有问题的，我似乎还没有定义超时的情况，但是百度一下就有结果比较容易。

php关键代码如下【数据获取和mysql连接的懒得写了】：$sql = "INSERT INTO cg_article (title,content,size,date,uid,cid) VALUES ('$title','$content', $size,'$date',$uid,$cid)"; //将获取到的值写入数据库

if ($conn->query($sql) === TRUE) { //写入成功的情况，定义数组呈现json数据

$json_arr = array("state"=>"success","info"=>"保存成功","date"=>$date);

echo json_encode($json_arr);

} else { //反之没有成功

$json_arr = array("state"=>"error","info"=>"保存失败","date"=>$date);

echo json_encode($json_arr);

}

$conn->close(); //关闭数据库连接

界面效果如下：

赞

0

打赏

支付宝支付

您的大名：

1 元

5 元

10 元

20 元

50 元

100 元

万水千山总是情，给个打赏行不行。

打赏

本文来自投稿，不代表本站立场，如若转载，请注明出处：https://www.ruletree.club/archives/809/