ربط ملف HTML بـ PHP باستخدام AJAX

في هذا السياق، يبدو أنك تسعى إلى ربط ملف HTML بملف PHP باستخدام تقنية AJAX. من الجيد أن تقوم بتحسين تجربة المستخدم في تطبيقك من خلال استخدام AJAX لتقديم تفاعل سلس وديناميكي دون الحاجة إلى إعادة تحميل الصفحة.

لتحقيق ذلك، يمكنك إجراء بعض التعديلات على ملف HTML وملف AJAX الخاص بك. في البداية، يجب عليك إضافة معرف فريد لزر الإرسال في نموذج HTML الخاص بك والاستفادة منه في كود AJAX. هنا توجيهاتك:

في ملف HTML:

html
html>
<html>
<head>
    <title>Nametitle>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js">script>
head>
<body>
    <div id="main">
        <h1>Detailsh1>
        <div id="name">
            <h2>Nameh2>
            <hr/>
            <form id="form1" method="POST" action="name.php">
                <label>Name: label>
                <input type="text" name="per_name" id="nameInput" required="required" placeholder="please enter name"/><br/><br/>
                <label>Age: label>
                <input type="text" name="per_age" id="ageInput" required="required" placeholder="please enter age"/><br/><br/>
                <input type="button" value="Submit" id="submitBtn"/><br/>
            form>
        div>
    div>
    <script src="ajax_script.js">script>
body>
html>

وفي ملف AJAX (ajax_script.js):

javascript
$(document).ready(function(){
    $("#submitBtn").click(function(){
        var name = $("#nameInput").val();
        var age = $("#ageInput").val();
        var dataString = {per_name: name, per_age: age};

        // AJAX Code To Submit Form.
        $.ajax({
            type: "POST",
            url: "name.php",
            data: dataString,
            cache: false,
            success: function(result){
                alert(result);
            }
        });
        return false;
    });
});

يرجى مراعاة أننا قمنا بتعديل معرف الزر من “submit” إلى “submitBtn” لتجنب التداخل مع خاصية submit الخاصة بالنموذج. كما قمنا بتحسين الأكواد لتعكس التغييرات اللازمة. آمل أن يكون ذلك مفيدًا ويجيب على استفسارك.

المزيد من المعلومات

تفعيل Skrollr في Angular2: التحكم في DOM بواسطة Directives

استخدام CSS Modules بفعالية في تطبيقات React/Webpack