เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

โพสต์แล้ว: **16/08/2022 1:02 pm**

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

: หน้าฟอร์มที่สร้างขึ้น.png (14.31 KiB) Viewed 3966 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>

โพสต์แล้ว: **16/08/2022 4:07 pm**

การเขียนโค้ด ไม่ควร fix ชื่อ host ไว้ในโค้ดทุกหน้า เพราะเวลาเอาไปใช้งานจริง ต้องการเปลี่ยนชื่อ host จะแก้ไขได้ยาก

โพสต์แล้ว: **16/08/2022 5:03 pm**

อันนี้ได้เขียนในส่วนของ js ไว้รึยังครับ

โพสต์แล้ว: **16/08/2022 5:35 pm**

ที่รองรับพวกปุ่มหรือการแนบไฟลฺ์อะครับ

โพสต์แล้ว: **17/08/2022 9:12 am**

wkid เขียน: ↑16/08/2022 5:03 pm อันนี้ได้เขียนในส่วนของ js ไว้รึยังครับ

ยังไม่มีการเริ่มเขียนในส่วนของ js เลยค่ะ จากที่แนะนำมาคือให้สร้างไฟล์ js ในตอนนี้ทำแค่สร้างไฟล์ขึ้นมายังไม่ได้ลงโค้ดใดๆเลยค่ะ

: 2022-08-17.png (47.36 KiB) Viewed 3934 times

โพสต์แล้ว: **17/08/2022 9:27 am**

สำหรับตรงการกดปุ่มส่งให้เราไปเรียกฟีงก์ชั่นในตัวของ 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",
        });

โพสต์แล้ว: **20/08/2022 10:02 am**

สอบถามเพิ่มเติมเกี่ยวกับการ

ไม่ควร fix ชื่อ host ไว้ในโค้ดทุกหน้า เพราะเวลาเอาไปใช้งานจริงแก้ไขยาก

สามารถแก้ไขได้ยังไงบ้างคะ ตรงส่วนนี้ยังไม่ทราบวิธีการทำ รบกวนอธิบายหรือแนะนำว่าควรทำยังไงหรือ ทำอะไรก่อนทีค่ะ

โพสต์แล้ว: **20/08/2022 10:31 am**

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

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

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

}

จะเป็นการเปลี่ยนจากหน้า index.html ไปยังหน้า show.html ในไฟล์โปรเจคครับ

โพสต์แล้ว: **20/08/2022 10:36 am**

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

<a href="#" onclick="ssss(${c.id})"><span class="glyphicon glyphicon-share"></span></a>

อันนี้เป็นตัวอย่างในส่วนของการดึงค่าครับตรง a herf สามารถ ใส่ onclick ได้ครับ

โพสต์แล้ว: **20/08/2022 10:43 am**

สำหรับ ตรง localhost อันนี้ไม่ต้องกำหนดก็ได้นะครับ ตรง a href

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

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

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

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

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

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

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

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

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

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

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

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