ajax提交表单如何提交?ajax表单提交实现方式

TheDisguiser 2020-04-15 18:23:46 java常见问答 7825

Ajax一直前端开发的小伙伴们最好的技术之一,今天我们就来了解一下,如何使用ajax来实现表单提交,一起来看看吧。

首先我们来看看传统的提交方式吧,

<form action="test.php" method="post"></form>

这种方式简单、快捷、缺点是会刷新页面、跳转页面。

下面来看看ajax提交表单

Ajax最大的优点就是不刷新页面,不跳转页面,自己默默提交。

首先我们得创建一个表单提交页面:

例:index.html

这个主页面由两个部分组成

1、表单控件

2、jQuery+ajax处理脚本

jQuery脚本会获取form表单的数据,通过post的方式提交给api.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function insert() {
            $.ajax({
                type: "POST",//方法
                url: "api.php" ,//表单接收url
                data: $('#form1').serialize(),
                success: function () {
                  //提交成功的提示词或者其他反馈代码
                    var result=document.getElementById("success");
                    result.innerHTML="成功!";
                },
                error : function() {
                  //提交失败的提示词或者其他反馈代码
                    var result=document.getElementById("success");
                    result.innerHTML="失败!";
                }
            });
        }
    </script>
</head>
<body>
<div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p><input name="title" id="title" type="text" value="title"/></p>
        <p><input name="url" id="url" type="text" value="url"/></p>
        <p><input type="button" value="插入" onclick="insert()"></p>
        <p><div id="success"></div></p>
    </form>
</div>
</body>
</html>

下面是表单接收页面

api.php

这个页面很简单,就是连接数据库,插入数据库就行了。

插入数据库的两个值为title和url

< ? php
$title = $_POST['title'];
$url = $_POST['url'];
$con = mysql_connect("localhost", "root", "root");
if (!$con)
{
    die('Could not connect: '.mysql_error());
}
mysql_select_db("test", $con);
mysql_query("INSERT INTO testdata (title, url) 
        VALUES('$title', '$url')
        ");
        mysql_close($con); ?
        >

结果

ajax提交表单

以上就是ajax提交表单的方式了,想了解更多关于Java入门的相关内容的话,就请持续关注本网站吧。