javascript - A problem with using jquery's ajax and php together to achieve non-refresh form submission

WBOY
Release: 2016-10-10 11:55:55
Original
963 people have browsed it

javascript - A problem with using jquery's ajax and php together to achieve non-refresh form submission

The picture is my page. After opening the homepage link, the main part (black box on the left) is displayed;
The subpage on the right (the subpage obtained through ajax in the div#main_box on the right)
When the homepage link is just opened Display the subpage loaded when pressing the button

Now I have a form in subpage 2 that is loaded when button 2 is pressed. I need to submit the form and then get the value submitted by the form through PHP, then go to the database to query the information, return the database data and then output it to this subpage 2. I don’t know. How to achieve.

I found this method after searching online for a long time:

学期

Copy after login
Copy after login

But I don’t know how to use it, please give me some advice

Reply content:

javascript - A problem with using jquery's ajax and php together to achieve non-refresh form submission

The picture is my page. After opening the homepage link, the main part (black box on the left) is displayed;
The subpage on the right (the subpage obtained through ajax in the div#main_box on the right)
When the homepage link is just opened Display the subpage loaded when the button is pressed

Now I have a form in subpage 2 that is loaded when I press button 2. I need to submit the form and then get the value submitted by the form through PHP, then go to the database to query the information, return the database data and then output it to this subpage 2. I don’t know. How to achieve.

I searched online for a long time and found this method:

学期

Copy after login
Copy after login

But I don’t know how to use it, please give me some advice

  1. Use the iframe function. The element of button two is an a tag. Display it as you want the button to look like. Add the target attribute, so that your second requirement is naturally solved.

      按钮二
      
    Copy after login
  2. Add a click event to the second label of the button, get the content to be displayed in the main_box through ajax, and add it to the main_box, then tie it to the submit event on the retrieved form, and insert the response from the form submission into in main_box.

My approach is to disable the default submission event, use jq's ajax to send the request, and use data:
$(formSelector).serialize() for the form data, so there is no need to read the value separately, and refresh the page through the callback function.

I know this, let’s put it this way, what ajax returns is actually what is printed in your teacher.php. Taking the dataType format as html as an example, you can do a test in that teacher.php and directly echo '

Hi, I want to be passed back

', and then return to this success:function(data){alert(data)};//See what it is, if it is json, then teacher.php The only data that can be output is echo json encode($array); here it is dataType:'json'
//I don’t know if I wrote it wrong= =#
//By the way, you have to add an onsubmit=' to that form return checnkForm()';Write ajax in the checkForm() function, and finally return false, otherwise the form submission will jump a bit

$.ajax({
url:"teacher.php?c=fankui",
type:"post",
data:{"xx":"xx"},
dataType:'html',
success:function(data){
//数据加载成功
},
error:function(){
//数据加载失败
}
});
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!