通过Ajax将表单数据发布到php？

debugcn 发表于 Dev

少年14

我正在尝试将数据从html表单发布到php页面。

形式如下：

<form onSubmit="return validEmail()" style="text-align:center; clear:both">        
        <input type="text" id="ms_firstName" name="ms_firstName" required placeholder="First Name" style="float:left;" >  
        <input type="text" id="ms_lastName" name="ms_lastName" required style="float:left; margin-left:20px;" placeholder="Last Name"> 
        <input type="email" id="ms_email" name="ms_email" required placeholder="Corporate Email address" pattern="^.*(\w+@barclays|\[email protected]).*$" oninvalid="this.setCustomValidity('Please enter your corporate email')" style="float:left; margin-top: 10px;">
        <input type="password" id="ms_password" name="ms_password" required style="clear:right; margin-top: 10px; margin-left: 20px;" placeholder="Password" pattern=".{6,}">
        <input type="submit"  name="submit" style="alignment-adjust:central; margin-top:30px; clear:right;" ><br>    
     </form>

这是ajax：

  $.ajax({ 
        url: "/ms_form_handler.php",
        method:"POST",
        data: "{'ms_firstName':'" + ms_firstName+ "', 'ms_lastName':'" + ms_lastName+ "', 'ms_email':'" + ms_email+ "', 'ms_password':'" + ms_password+ "'}",
        success: function (){
            alert('form was submitted succesfully');
        }
             });

下面是php拾取字段名称的方法：

if($_POST && isset($_POST['submit'], $_POST['ms_firstName'], $_POST['ms_lastName'], $_POST['ms_email'], $_POST['ms_password']`)){}

任何帮助，将不胜感激。

Poiz

首先，您在data属性中传递的是字符串而不是对象。您可以像这样修改代码：

HTML表单：

    <form onSubmit="return validEmail()" style="text-align:center; clear:both">
        <input type="text"      id="ms_firstName"   name="ms_firstName" required placeholder="First Name" style="float:left;" >
        <input type="text"      id="ms_lastName"    name="ms_lastName" required style="float:left; margin-left:20px;" placeholder="Last Name">
        <input type="email"     id="ms_email"       name="ms_email" required placeholder="Corporate Email address" pattern="^.*(\w+@barclays|\[email protected]).*$" oninvalid="this.setCustomValidity('Please enter your corporate email')" style="float:left; margin-top: 10px;">
        <input type="password"  id="ms_password"    name="ms_password" required style="clear:right; margin-top: 10px; margin-left: 20px;" placeholder="Password" pattern=".{6,}">
        <input type="submit"    name="submit" style="alignment-adjust:central; margin-top:30px; clear:right;" ><br>
    </form>

JQUERY代码：：

    <script type="text/javascript">
        var ms_firstName    = $("#ms_firstName").val();
        var ms_lastName     = $("#ms_lastName").val();
        var ms_email        = $("#ms_email").val();
        var ms_password     = $("#ms_password").val();
        $.ajax({
            url     : "/ms_form_handler.php",
            method  : "POST",
            data    : { // THE data PROPERTY IS EXPECTED TO BE AN OBJECT & YOU PASSED A STRING...
                ms_firstName    : ms_firstName,
                ms_lastName     : ms_lastName,
                ms_email        : ms_email,
                ms_password     : ms_password
            },

            success: function (){
                alert('form was submitted succesfully');
            }
        });
    </script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。