สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

ในการทำเว็บเซอร์วิส โดยถ้าเรามีการสร้าง API เรียบร้อยแล้ว เราจะทำการเรียกใช้งาน ตัว API จาก form ที่เราสร้างขึ้นยังไงคะ โดยใช้ ภาษา JavaScript ในการเรียกใช้งาน
โดยในฟอร์มเราจะมีการ รับชื่อ และไฟล์ PDF ที่เราต้องการแปลง จากนั้นเมื่อกด แปลงไฟล์ ให้ทำการแปลงไฟล์ PDF เป็นภาพ
หน้าฟอร์มที่สร้างขึ้น.png
หน้าฟอร์มที่สร้างขึ้น.png (14.31 KiB) Viewed 2869 times
โค้ดหน้าฟอร์ม

โค้ด: เลือกทั้งหมด

<body>
<h3 style="background-color:#337ab7;">
        <center><label style="color: #FFFFFF;">การจัดการไฟล์ PDF</label></center>
    </h3>
        <div class="container">
            <div class="row justify-content-center">

                <label for="text-name" class="col-sm-2 col-form-label"><b><a href="http://localhost:8000/PDF_Tooolkits/index">ใส่ลายน้ำไฟล์ PDF</a></b></label>
                <label for="text-name" class="col-sm-2 col-form-label"><b><a href="http://localhost:8000/PDF_Tooolkits/pdf_to_pic">แปลง PDF เป็นภาพ</a></b></label>
            </div>
        </div>
<form method="post">
        <div class="container">
            <div class="row justify-content-center">

                <label for="text-name" class="col-sm-2 col-form-label">ชื่อผู้ใช้ </label>
                <div class="col-7">
                    <input type="text" id="text-name" class="form-control" multiple required><br><br>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row justify-content-center">

                <label for="text-name" class="col-sm-2 col-form-label" >เลือกไฟล์ PDF </label>
                <div class="col-7">

                    <input type="file" id="text-filepdf" accept=".pdf" class="form-control" name="files" multiple required><br><br>

                </div>

            </div>
        </div>

        <form id="form3">
            <div class="container">
                <div class="row justify-content-center">
            <center><a href="javascript:toggle('pdf2pic')"><input type="submit" value="แปลงไฟล์ PDF เป็นภาพ"class="btn btn-primary"></a></input></center>
                </div>
            </div>
        </form>
</form>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
you're the only one treasure💎
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41126
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

การเขียนโค้ด ไม่ควร fix ชื่อ host ไว้ในโค้ดทุกหน้า เพราะเวลาเอาไปใช้งานจริง ต้องการเปลี่ยนชื่อ host จะแก้ไขได้ยาก
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
wkid
PHP VIP Members
PHP VIP Members
โพสต์: 2158
ลงทะเบียนเมื่อ: 17/05/2022 10:37 am

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

โพสต์ที่ยังไม่ได้อ่าน โดย wkid »

อันนี้ได้เขียนในส่วนของ js ไว้รึยังครับ
ทำไมสัตว์ที่น่ากลัวที่สุดถึงตัวเล็กๆที่เรียกว่า Bug ละนั่น );
ภาพประจำตัวสมาชิก
wkid
PHP VIP Members
PHP VIP Members
โพสต์: 2158
ลงทะเบียนเมื่อ: 17/05/2022 10:37 am

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

โพสต์ที่ยังไม่ได้อ่าน โดย wkid »

ที่รองรับพวกปุ่มหรือการแนบไฟลฺ์อะครับ
ทำไมสัตว์ที่น่ากลัวที่สุดถึงตัวเล็กๆที่เรียกว่า Bug ละนั่น );
ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

wkid เขียน: 16/08/2022 5:03 pm อันนี้ได้เขียนในส่วนของ js ไว้รึยังครับ
ยังไม่มีการเริ่มเขียนในส่วนของ js เลยค่ะ จากที่แนะนำมาคือให้สร้างไฟล์ js ในตอนนี้ทำแค่สร้างไฟล์ขึ้นมายังไม่ได้ลงโค้ดใดๆเลยค่ะ
2022-08-17.png
2022-08-17.png (47.36 KiB) Viewed 2837 times
you're the only one treasure💎
ภาพประจำตัวสมาชิก
wkid
PHP VIP Members
PHP VIP Members
โพสต์: 2158
ลงทะเบียนเมื่อ: 17/05/2022 10:37 am

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

โพสต์ที่ยังไม่ได้อ่าน โดย wkid »

สำหรับตรงการกดปุ่มส่งให้เราไปเรียกฟีงก์ชั่นในตัวของ js นะครับ ในหน้าของ html ทำไป เวลาหคลิกให้ไปดึง script ทีเป็นฟังก์ชั่นที่เราสร้างไว้ในหน้า js ครับ
อันนี้ตัวอย่าง

โค้ด: เลือกทั้งหมด

<input type="button" value="คำนวณ" onclick="getInput()" class="btn btn-success"> </input>
จะไปดึงฟังก์ชั่นในตัวของ js ที่มีชื่อว่า getInput นะครับ

โค้ด: เลือกทั้งหมด

function getInput() {


    var name = document.getElementById("text-name").value
    console.log("ชื่อผู้ใช้ ", name);
    var word = document.getElementById("text-word").value
    console.log("คำที่ต้องการส่ง ", word);
    var check = check1
    console.log("คำที่ต้องการส่ง ", check);
    console.log(typeof (check));}
ส่วนโค้ดที่เป็น API ในการส่งค่า ไปยัง py. อันนี้จะใช้การส่งแบบนี้นะครับ

โค้ด: เลือกทั้งหมด

$.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",


            url: `http://${IPjs}:${configjs}/cutword`,
            data: JSON.stringify({ คีย์: ข้อมูล }), //แนะนำให้ใช้ชื่อเดี๋ยวกันไปเลยก็ได้ครับ จะง่ายดี
            success: function (data) {

                console.log(data);
                nubkumeiei(data.prefix, name)
            },
            dataType: "json",
        });
ทำไมสัตว์ที่น่ากลัวที่สุดถึงตัวเล็กๆที่เรียกว่า Bug ละนั่น );
ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

สอบถามเพิ่มเติมเกี่ยวกับการ
ไม่ควร fix ชื่อ host ไว้ในโค้ดทุกหน้า เพราะเวลาเอาไปใช้งานจริงแก้ไขยาก
สามารถแก้ไขได้ยังไงบ้างคะ ตรงส่วนนี้ยังไม่ทราบวิธีการทำ รบกวนอธิบายหรือแนะนำว่าควรทำยังไงหรือ ทำอะไรก่อนทีค่ะ
you're the only one treasure💎
ภาพประจำตัวสมาชิก
wkid
PHP VIP Members
PHP VIP Members
โพสต์: 2158
ลงทะเบียนเมื่อ: 17/05/2022 10:37 am

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

โพสต์ที่ยังไม่ได้อ่าน โดย wkid »

เอาส่วนตรงที่ฟิกย้ายไปในส่วนของ js ครับ เวลาเปลี่ยนหน้าให้คลิกละไปดึงค่าใน js ครับ

โค้ด: เลือกทั้งหมด

function ssss(data) {
    setTimeout(() => {
        window.location = 'show.html';
    }, 1000);

}
จะเป็นการเปลี่ยนจากหน้า index.html ไปยังหน้า show.html ในไฟล์โปรเจคครับ
ทำไมสัตว์ที่น่ากลัวที่สุดถึงตัวเล็กๆที่เรียกว่า Bug ละนั่น );
ภาพประจำตัวสมาชิก
wkid
PHP VIP Members
PHP VIP Members
โพสต์: 2158
ลงทะเบียนเมื่อ: 17/05/2022 10:37 am

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

โพสต์ที่ยังไม่ได้อ่าน โดย wkid »

โค้ด: เลือกทั้งหมด

<a href="#" onclick="ssss(${c.id})"><span class="glyphicon glyphicon-share"></span></a>
อันนี้เป็นตัวอย่างในส่วนของการดึงค่าครับตรง a herf สามารถ ใส่ onclick ได้ครับ
ทำไมสัตว์ที่น่ากลัวที่สุดถึงตัวเล็กๆที่เรียกว่า Bug ละนั่น );
ภาพประจำตัวสมาชิก
wkid
PHP VIP Members
PHP VIP Members
โพสต์: 2158
ลงทะเบียนเมื่อ: 17/05/2022 10:37 am

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

โพสต์ที่ยังไม่ได้อ่าน โดย wkid »

สำหรับ ตรง localhost อันนี้ไม่ต้องกำหนดก็ได้นะครับ ตรง a href
ทำไมสัตว์ที่น่ากลัวที่สุดถึงตัวเล็กๆที่เรียกว่า Bug ละนั่น );
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 39