Backend Development
PHP Tutorial
javascript - A problem with using jquery's ajax and php together to achieve non-refresh form submission
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:
<code><form action="teacher.php" method="post">
<p>学期</p>
<select name="xueqi" id="xueqi">
<option value="201520161">2015-2016学年第一学期</option>
<option value="201520162">2015-2016学年第二学期</option>
<option value="201620171">2016-2017学年第一学期</option>
</select>
</form>
<script>
$(function(){
$("#jiansuo").click(function(){
var xueqi = $("#xueqi").val();//取得表单的值
var one = $("#one").val();
var one_week = $("#one_week").val();
var more = $("#more").val();
var more_week_num = $("#more_week_num").val();
var more_week_ba = $("#more_week_ba").val();
var xingqi = $("#xingqi").val();
var banji = $("#banji").val();
//Ajax post数据
$.ajax({
type: "POST",//Ajax请求为post
url: "teacher.php?c=fankui",//ajax请求URL 脚本地址
data: {"xueqi":xueqi,"one":one,"one_week":one_week,"more":more,"more_week_ba":more_week_ba,"xingqi":xingqi,"banji":banji}, //传递的值
success: function(data){ //回调函数 这里的data你可以返回HTML也可以是JSON 为了简单你返回HTML就可以了。
$("#main_right_box").html("").html(data);//将返回的列表插入分类.
}
});
});
}
</script>
</code>But I don’t know how to use it, please give me some advice
Reply content:
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:
<code><form action="teacher.php" method="post">
<p>学期</p>
<select name="xueqi" id="xueqi">
<option value="201520161">2015-2016学年第一学期</option>
<option value="201520162">2015-2016学年第二学期</option>
<option value="201620171">2016-2017学年第一学期</option>
</select>
</form>
<script>
$(function(){
$("#jiansuo").click(function(){
var xueqi = $("#xueqi").val();//取得表单的值
var one = $("#one").val();
var one_week = $("#one_week").val();
var more = $("#more").val();
var more_week_num = $("#more_week_num").val();
var more_week_ba = $("#more_week_ba").val();
var xingqi = $("#xingqi").val();
var banji = $("#banji").val();
//Ajax post数据
$.ajax({
type: "POST",//Ajax请求为post
url: "teacher.php?c=fankui",//ajax请求URL 脚本地址
data: {"xueqi":xueqi,"one":one,"one_week":one_week,"more":more,"more_week_ba":more_week_ba,"xingqi":xingqi,"banji":banji}, //传递的值
success: function(data){ //回调函数 这里的data你可以返回HTML也可以是JSON 为了简单你返回HTML就可以了。
$("#main_right_box").html("").html(data);//将返回的列表插入分类.
}
});
});
}
</script>
</code>But I don’t know how to use it, please give me some advice
-
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.
<code> <a href="相应的url" target="main_box_frame">按钮二</a> <div id="main_box"><iframe name="main_box_frame"></iframe></div></code>
Copy after login 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
<code>$.ajax({
url:"teacher.php?c=fankui",
type:"post",
data:{"xx":"xx"},
dataType:'html',
success:function(data){
//数据加载成功
},
error:function(){
//数据加载失败
}
});
</code>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1668
14
1428
52
1329
25
1273
29
1256
24
MySQL: The Database, phpMyAdmin: The Management Interface
Apr 29, 2025 am 12:44 AM
MySQL and phpMyAdmin can be effectively managed through the following steps: 1. Create and delete database: Just click in phpMyAdmin to complete. 2. Manage tables: You can create tables, modify structures, and add indexes. 3. Data operation: Supports inserting, updating, deleting data and executing SQL queries. 4. Import and export data: Supports SQL, CSV, XML and other formats. 5. Optimization and monitoring: Use the OPTIMIZETABLE command to optimize tables and use query analyzers and monitoring tools to solve performance problems.
Composer: Aiding PHP Development Through AI
Apr 29, 2025 am 12:27 AM
AI can help optimize the use of Composer. Specific methods include: 1. Dependency management optimization: AI analyzes dependencies, recommends the best version combination, and reduces conflicts. 2. Automated code generation: AI generates composer.json files that conform to best practices. 3. Improve code quality: AI detects potential problems, provides optimization suggestions, and improves code quality. These methods are implemented through machine learning and natural language processing technologies to help developers improve efficiency and code quality.
Steps to add and delete fields to MySQL tables
Apr 29, 2025 pm 04:15 PM
In MySQL, add fields using ALTERTABLEtable_nameADDCOLUMNnew_columnVARCHAR(255)AFTERexisting_column, delete fields using ALTERTABLEtable_nameDROPCOLUMNcolumn_to_drop. When adding fields, you need to specify a location to optimize query performance and data structure; before deleting fields, you need to confirm that the operation is irreversible; modifying table structure using online DDL, backup data, test environment, and low-load time periods is performance optimization and best practice.
What is the significance of the session_start() function?
May 03, 2025 am 12:18 AM
session_start()iscrucialinPHPformanagingusersessions.1)Itinitiatesanewsessionifnoneexists,2)resumesanexistingsession,and3)setsasessioncookieforcontinuityacrossrequests,enablingapplicationslikeuserauthenticationandpersonalizedcontent.
How to uninstall MySQL and clean residual files
Apr 29, 2025 pm 04:03 PM
To safely and thoroughly uninstall MySQL and clean all residual files, follow the following steps: 1. Stop MySQL service; 2. Uninstall MySQL packages; 3. Clean configuration files and data directories; 4. Verify that the uninstallation is thorough.
An efficient way to batch insert data in MySQL
Apr 29, 2025 pm 04:18 PM
Efficient methods for batch inserting data in MySQL include: 1. Using INSERTINTO...VALUES syntax, 2. Using LOADDATAINFILE command, 3. Using transaction processing, 4. Adjust batch size, 5. Disable indexing, 6. Using INSERTIGNORE or INSERT...ONDUPLICATEKEYUPDATE, these methods can significantly improve database operation efficiency.
How to use MySQL functions for data processing and calculation
Apr 29, 2025 pm 04:21 PM
MySQL functions can be used for data processing and calculation. 1. Basic usage includes string processing, date calculation and mathematical operations. 2. Advanced usage involves combining multiple functions to implement complex operations. 3. Performance optimization requires avoiding the use of functions in the WHERE clause and using GROUPBY and temporary tables.
Composer: The Package Manager for PHP Developers
May 02, 2025 am 12:23 AM
Composer is a dependency management tool for PHP, and manages project dependencies through composer.json file. 1) parse composer.json to obtain dependency information; 2) parse dependencies to form a dependency tree; 3) download and install dependencies from Packagist to the vendor directory; 4) generate composer.lock file to lock the dependency version to ensure team consistency and project maintainability.
