How to implement ajax form submission in php

How to implement ajax to submit form form in php: 1. Create an HTML and PHP file and create the form form; 2. Pass "$.ajax({type: "post",url:"text7.php ",data:dataString...})" code can be used to submit the form.

#The operating environment of this article: Windows7 system, PHP7.1, Dell G3 computer.

How to implement ajax form submission in php?

Submit the form through php jq ajax

The code is as follows:

html

<div id="contact_form">
    <form name="contact" method="post" >
            <label for="name" id="name_label">姓名</label>
            <input type="text" name="name" id="name" size="30" value="" class="text-input" />
            <label class="error" for="name" id="name_error">此项必填</label>
            <label for="email" id="email_label">您的Email</label>
            <input type="text" name="email" id="email" size="30" value="" class="text-input" />
            <label class="error" for="email" id="email_error">此项必填</label>
            <label for="phone" id="phone_label">您的联系电话</label>
            <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
            <label class="error" for="phone" id="phone_error">此项必填</label>
            <br />
            <input type="button" name="submit" class="button" id="submit_btn" value="我要发送" />
    </form>
</div>

js

<script language="javascript">
    $(function(){
        $(".error").hide();
        $(".button").click(function(){
           var name= $("#name").val();
            if(name==""){
                $("#name_error").show(3600);
                $("#name_error").focus();
                return false;
                //return false 的作用是为了让input框效果是一次只出现一个
                //当type为submit的时候，不return false 的话就会提交form表单而没有效果
                //当type为button的时候，不用return false也可以显示效果
                //原话：而只有当出现错误，即为空时，错误才会出现，因为有 return false 的作用，每次仅会出现一个错误。
            }
            var email= $("#email").val();
            if(email==""){
                $("#email_error").show(3600);
                $("#email_error").focus();
                return false;
            }
            var phone= $("#phone").val();
            if(phone==""){
                $("#phone_error").show(3600);
                $("#email_error").focus();
                return false;
            }
            var dataString = &#39;name=&#39;+ name + &#39;&email=&#39; + email + &#39;&phone=&#39; + phone;
            //document.write(dataString);
            $.ajax({
                type: "post",
                url:"text7.php",
                data:dataString,
                success:function(mag){
                   // alert(mag);return;
                    //ajax提交form表单php里无法看post值，只能在回调函数里面打印，下面为成功之后的返回效果
                    $(&#39;#contact_form&#39;).html("<div id=&#39;message&#39;></div>");
                    $("#message").html("<p>联系方式已成功提交！</p>")
                            .append("<p>Script design</p>")
                            .hide()
                            .fadeIn(1500, function() {
                                $(&#39;#message&#39;).append("<img  id=&#39;checkmark&#39; src=&#39;yes.ico&#39; / alt="How to implement ajax form submission in php" >");
                            });
                }
            })
            return false;
        })
    })
</script>

php

print_r($_POST);
echo $_POST[&#39;name&#39;].&#39;<br>&#39;."i&#39;m ok!~";die;

Recommended learning: "PHP Video Tutorial"

The above is the detailed content of How to implement ajax form submission in php. For more information, please follow other related articles on the PHP Chinese website!