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文件并进行验证呢？

首选推荐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>

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

用 <form> 表单提交,也可以用ajax无刷新提交

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

php中获取$_POST["username"] 和 $_POST["password"]即可

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632