HTML调用PHP文件并传递参数的最好方法是什么？

对于HTML文件中的button控件，有两个输入框，试图通过button控件将参数传递给PHP文件，在PHP文件中验证用户名和密码是否一致（假设两者相同）

<body>
    <div class="BorderStyle">
        <div class="TitleStyle">账户登录</div>
        <div class="GuideTextStyle">账户名称</div>
        <input id="usernamefield" class="DefaultInputStyle">
        <div class="GuideTextStyle">账户密码</div>
        <input id="passwordfield" type="password" class="DefaultInputStyle">
        <button class="DefaultButtonStyle" onclick="ClearUserNameAndPassword()">清空</button>
        <button class="DefaultButtonStyle" onclick="trylogin(passwordfield.value)" ">登录</button>
        <p id="tipmessage " class="DefaultTipStyle ">PS:暂不支持其它登录方式</p>
    </div>
</body>

那么如何调用PHP文件并进行验证呢？

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

3条回答默认最新

CSDN专家-showbo 2022-03-14 09:03

关注

首选推荐ajax，这样不会刷新页面，但是如果服务器端出问题，需要通过开发工具来查看服务器端返回的错误或者需要写附加的代码console.log输出服务器端返回的内容以便定位错误。

表单提交会刷新页面，但是好处就是出现错误一目了然。

ajax提交可以用原生的XMLHttpRequest对象，也可以用其他ajax类库，如jquery.ajax或者axios，这些库对原生XMLHttpRequest对象做了封装，调用方便，但是需要按照框架的语法来编写代码。
原生XMLHttpRequest对象如何使用题主可以参考下面的文章

XMLHttpRequest - Web API 接口参考 | MDN XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

jQuery框架（还集成了dom获取之类的功能）

jQuery AJAX 方法 | 菜鸟教程 jQuery AJAX 方法 jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。下面的表格列出了所有的 jQuery AJAX 方法：方法描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup..

https://www.runoob.com/jquery/jquery-ref-ajax.html

axios

axios中文文档|axios中文网 | axios 欢迎使用 axios，本文档将帮助您快速上手。(troubleshooting.html) 中的解答，什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建 XMLHttpRequests 从 node http://www.axios-js.com/zh-cn/docs/

昨天的示例给题主在增加了一个post方法的

<meta charset="utf-8">
<?php
//同一个页面判断是否提交了数据在做验证
if(
(isset($_GET["username"])&&isset($_GET["password"]))//GET提交
||
(isset($_POST["username"])&&isset($_POST["password"]))//POST提交
){
    if(isset($_GET["username"])){$username=$_GET["username"]; $password=$_GET["password"];}
    else{$username=$_POST["username"]; $password=$_POST["password"];}
    $con = odbc_connect('DRIVER={SQL Server};SERVER=.;DATABASE=test','sa','123');
    //$con = odbc_connect('DRIVER={SQL Server};SERVER=DESKTOP-LBLP1PJ\\SQLEXPRESS01;DATABASE=test','sa','12345');//题主的驱动应该这样
    $query = "select * from mytable where name='${username}' and [value]='${password}'";
 
    $result = odbc_do($con,$query);
    $count=odbc_num_rows($result);
    ob_clean();//清除缓存，就是去掉上面的meta标签内容
    echo $count; //输出账号密码对应的记录数量
    die();//结束输出
}
 
?>
 
<form id="myform1">
    <div>账户名称</div>
    <input id="usernamefield" name="username" type="text" autocomplete="off" />
    <div>账户密码</div>
    <input id="passwordfield" name="password" type="password" autocomplete="off" />
    <button onclick="Tryloginsystem()" type="button">登录GET</button>
    <button onclick="TryloginsystemPOST()" type="button">登录POST</button>
</form>
<script type="text/javascript">
    //GET提交示例
    function Tryloginsystem() {
       var xhr=new XMLHttpRequest();
       //get提交需要将数据放到url后，post的话放到xhr.send中发送数据，而且注意设置content-type为application/x-www-form-urlencoded
       xhr.open('get','CheckUserNameAndPassword.php?username='+encodeURIComponent(usernamefield.value)+'&password='+encodeURIComponent(passwordfield.value));
       xhr.onreadystatechange=function(){
           if(4==xhr.readyState){
                var text=xhr.responseText;
                if(200==xhr.status)usernamefield.value=text=='0'?'用户名或者密码错误！':'successful';
                else alert('服务器出错\n'+text);
           }
       };
       xhr.send(null);
    }
    //post提交示例
    function TryloginsystemPOST() {
       var xhr=new XMLHttpRequest();
       //post的话放到xhr.send中发送数据，而且注意设置content-type为application/x-www-form-urlencoded
       xhr.open('post','CheckUserNameAndPassword.php');
       xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//需要open后才能调用setRequestHeader方法
       xhr.onreadystatechange=function(){
           if(4==xhr.readyState){
                var text=xhr.responseText;
                if(200==xhr.status)usernamefield.value=text=='0'?'用户名或者密码错误！':'successful';
                else alert('服务器出错\n'+text);
           }
       };
       //POST提交注意数据放到send中
       xhr.send('username='+encodeURIComponent(usernamefield.value)+'&password='+encodeURIComponent(passwordfield.value));
    }
</script>

有什么不明白可以继续交流~

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(2条)

报告相同问题？

关注问题

html 动态调用php文件,html静态页面调用php文件的方法
2021-03-25 09:57

学术女流氓的博客具体方法如下：静态页面中看上去好像是不能直接调用php文件的，但是却可以使用js调用方式来调用php文件，当然还可以使用ajax 调用php文件，下面就来给大家介绍一下：举一个简单的例子来说明:如在页面a.html中用下面...
html静态页面调用php文件的方法,html调用php文件的方法
2021-04-18 12:40

爱笑的姑娘最美的博客 html调用php文件的方法发布时间：2020-04-16 10:36:12来源：亿速云阅读：222作者：小新html调用php文件的方法这篇文章主要介绍了html调用php文件的方法，具有一定借鉴价值，需要的朋友可以参考下。下面就和我一起来...
用html调用php文件,html静态页面调用php文件的方法
2021-03-25 10:14

weixin_39772849的博客这篇文章主要介绍了html静态页面调用php文件的方法,在进行应用程序开发过程中非常具有实用价值,需要的朋友可以参考下本文实例讲述了html静态页面调用php文件的方法。分享给大家供大家参考。具体方法如下：静态页面中...
php 参数传递的常用方法,php参数传递的常用方法详解
2021-04-30 06:31

Deedeez的博客 PHP参数传递的常用方法有3种：$_POST[]、$_GET[]、$_SESSION[]，分别用于获取表单、URL和 Session变量的值。大理石机械构件维修厂家1.$_POST[]全局变量使用PHP的$_POST[]预定义变量可以获取表单元素的值，格式为：$_...
PHP system 调用外部程序并传递参数
2018-04-29 23:10

午夜游鱼的博客 PHP system() 调用外部程序并传递参数 使用PHP的时候，需要调用已有的程序作为项目的一部分，因为已经存在程序，所以直接使用system()函数是最直接的想法。 system的详细说明可以查看PHP手册的system 注意...
HTML文件怎么引入PHP文件,html静态页面怎么调用php文件_PHP教程
2021-04-21 19:16

何谨的博客但是有可以使用js调用方式来调用php文件，当然还可以使用ajax 调用php文件哦，下面我来给大家介绍举一个简单的例子来说明:如在页面a.html中用下面这句调用，可以将action=test的参数传递到b.php。Javascript代码代码...
PHP页面之间传递参数的三种方法
2022-08-24 12:28

wuxiaopengnihao1的博客本文章向大家介绍php中页面与页面之间如何进行参数传递。php中如果要将参数从一个页面传递到另外一个页面，可以使用post或get或$_SESSION。具体实现方法可以阅读文章正文部分。
php命令行传递参数,PHP命令行传递参数
2021-04-12 14:10

叶子粟的博客在以非命令行模式运行PHP的时候，我们...关于命令行的特点，可以直接看官方文档：http://php.net/manual/zh/features.commandline.php一、PHP命令行方式(CLI)传递参数我们可以类比shell文件的传参，如下：//test....
html和php文件怎么连接,html怎么跟php文件连接？html静态页面调用php文件的方法
2021-03-24 00:41

weixin_30667487的博客具体方法如下：静态页面中看上去好像是不能直接调用php文件的，但是却可以使用js调用方式来调用php文件，当然还可以使用ajax 调用php文件，下面就来给大家介绍一下：举一个简单的例子来说明:如在页面a.html中用下面...
实现html调用php,HTML如何调用PHP
2021-03-26 15:08

阳光下的少年的博客 HTML如何调用PHP发布时间：2020-07-09 11:37:19来源：亿速云阅读：64作者：Leah本篇文章给大家分享的是有关HTML如何调用PHP，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 3月23日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 3月15日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 3月13日

HTML调用PHP文件并传递参数的最好方法是什么？

3条回答 默认 最新

问题事件

3条回答默认最新